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
https://v4-alpha.getbootstrap.com/components/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
https://getbootstrap.com/docs/4.0/components/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