Getting ready for flexbox!
In version 4 of Bootstrap, flexbox support has finally arrived! However, it is an opt-in that can be used. The first step is to understand a little bit of flexbox, just in case you don't know, and then start using it.
We will not add any other element to our landing page example, since support for flexbox just begun with Bootstrap 4. We will cover it only to clarify this new option.
Understanding flexbox
The definition of flexbox came out with the CSS3 specifications. Its main purpose is to better organize elements in a web page in a predictable manner. It can be seen as an option similar to float
but one that offers a lot more choices, such as reordering elements and avoiding known issues of float, for example, the clearfix
workaround.
For a hierarchical organization, first of all, you need to wrap the element of all the flex items (such as the columns inside a .row
). It is also possible to play with the direction and axis from the wrapping element.
To exemplify the...