0333 200

Vertically align Bootstrap Alpha Modal

Vertically align Bootstrap Alpha Modal

If you're running bootstrap Alpha, you may want to consider upgrading to bootstrap 4 as alpha is like a early release version of 4, in between 3 and 4 which is going to have limitations as an early release.

Modal issue in Bootstrap 4 Alpha

Bootstrap has a build in component called a modal, whereby you click on a button or image and this triggers a pop up box to appear which can look quite slick, however in bootstrap 4 alpha, this only appears at the top of the page. We want to make this appear in the centre of the page vertically and horizontally. This can’t be done in Alpha, but upgrade to full version of bootstrap 4 and it appears in the centre as a default. Force the box to the centre in alpha There is a class called dialog-centered but this doesn’t work in alpha to vertically align boxes.

Bootstrap 4 alpha modal

The box appears at the top as default and there is no build in class to center like in the full version 4.

Bootstrap 4 Centered modal

In Bootstrap V4, There is a class called dialog-centered which works perfectly. This has the modal-dialog-centred built into the full version, hence why this works with single or multiple modals.

Alpha Modal Solution

Add the following line in between the modal and fade class to center the box vertically but only in bootstrap alpha. This won’t work in 3 as bootstrap 3 uses floats and not using flexbox. This added code will force the box to vertically centre to the page, but only works fully if using 1 modal on the page.

d-flex align-items-center

Other information

You can’t have 2 fully functioning modals on the same page in alpha as what I found was if you put 2 modals, they can display vertically after I add some extra classes, but the close button isn’t working for 1 out of the 2 modals. Upgrade to full bootstrap 4 and this works without any issues so unsure if. Bug exists but it is the alpha release.

24th of November 2018 By Simon

contact us direct on 0333 200 7212 or complete our online quote

get in touch today
Privacy Policy & CookiesTerms © Copyright 2021 - Eadetech Limited | Company Registration No: 04770510
103 Daventry RoadRomfordEssexRM3 7RD
0333 200 7212