Vertically Centered Bootstrap Modal with Flexbox

vertically centered bootstrap modal

The Bootstrap Modal component is nice and simple to use but it lacks one thing out of the box, and that is the ability to center it on the page vertically.

Bootstrap 3 was released back in 2013 and the CSS landscape was much different then. Now we have a lot of new tools, and Flexbox is one of those new tools that is a simple solution to this problem.

Here is a CodePen showing how it can be achieved:

See the Pen Bootstrap 3 Centered Modal with Flexbox by Eric Barnes (@ericlbarnes) on CodePen.

https://production-assets.codepen.io/assets/embed/ei.js

The two CSS selectors I added are the following:

.centered-modal.in {
    display: flex !important;
}
.centered-modal .modal-dialog {
    margin: auto;
}

Set the .in as a display flex, and it has to be defined as “!important” because Bootstrap itself puts a style="display: block" in the DOM once it’s opened. Then in the .modal-dialog set the margin to auto, so it’s centered on the screen, both vertically and horizontally.

Thanks to Flexbox creating a vertically centered Bootstrap modal window is now easier than ever.

PatternFly — UX Goodness with the ease of Bootstrap

Patternfly is a community project of designers and developers collaborating to build a UI framework for enterprise web applications. Combining UX best practices with the powerful Bootstrap framework, it gives you a complete package for your apps administration area. It features premade layouts, patterns, widgets, and styles to give you a solid base to build off.

Here are some of the highlights of PatternFly.

Dashboard
An Example Dashboard
Example Login Page
Example Login
Example with Vertical Nav
Example with Vertical Nav

Patternfly appears to be a comprehensive resource for the next time you need to build out a new application. Another nice feature is this is a collaborative project between designers and developers, and by having developers contributing it should be designed in a way that works with standard data.

Checkout Patternfly for more information and to download or contribute.