Posted on

Learn Flexbox with the Free Flexbox Zombies course

flexbox zombies

Flexbox Zombies is a brand new training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies. Check out this video Dave Geddes, the course creator, posted for the launch:

//platform.twitter.com/widgets.js

Having just started diving into Flexbox this course couldn’t have come at a better time. It’s an interesting take on learning and should help reinforce memorizing all the different types of Flex options that are available.

The course is free with three chapters available, with the goal of having twelve available in the future. It’s free to start the course but it does require registration.

Posted on

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.