In Bootstrap 3 and for the majority of websites, the only way to build multi-column layouts was to set column widths and use floats. Then on mobile, you would just remove the float and width property so that it would change to be one column.

Now with flexbox, or flexible box, you will be able to build complex grid layouts with more control and flexibility to adapt the layout as the viewport changes.

If you are familiar with an UL and LI relationship, flexbox is very similar in how it has sub items or flexbox items inside a parent wrapping container. But since flexbox is a display property it can be applied to any parent and child HTML elements and does not have its own HTML element like <flexbox>.

Keep in mind, Bootstrap is a CSS framework that builds upon the core language of CSS. So flexbox is the core CSS technology that Bootstrap uses for grid layout and is not a component created by Bootstrap. So it is helpful to know the fundamentals of flexbox in case you need to override something. Here are some additional sources to learn more about flexbox: A Complete Guide to Flexbox and Solved by Flexbox.

Learn more about flexbox.

Term: Flexbox

Want to Save Time Using Bootstrap 4?

Get templates, project code samples, videos, and reference guides to help you get started quickly.

Learn More

Written By: / Read Full Bio
Last updated on

Leave a comment