How to Create a New Breakpoint in Bootstrap 4

In Bootstrap 3, adding a new grid tier (breakpoint) was not a simple process. It required various LESS or CSS customizations. Thanks to Bootstrap 4 SASS, and the new $grid-breakpoints variable it's very easy to add a new grid tier. Consider for example you want to add a new "extra extra small" breakpoint named xxs

How the Bootstrap Grid Really Works

Bootstrap Grid Explained Over the last few years I've answered a lot (over 800!) of Bootstrap questions on Stack Overflow. Frequently these questions relate to the Bootstrap grid __ that powerful blend of containers, rows and columns that make responsive layouts possible and flexible with Bootstrap. More often than not, questions about the Bootstrap grid can

Bootstrap 4 SASS Variables

Playing with Boostrap 4 and SASS The upcoming Bootstrap 4 is built with SASS, and you can customize many options in the _variables.scss. There are several options to quickly change the default Bootstrap look. Set the SASS variables to easily change the grid breakpoints, container widths, borders, colors, fonts and more. There is also

When to Use Bootstrap's Row Class

A closer look at: "Can I have more than 12 columns in a single Bootstrap row?" Numerous times on Stackoverflow I've seen questions like this.. Can I have columns add up to more than 12? What will happen if I put more than 12 in a row? Do I need a new row every 12

Responsive Bootstrap Layouts

A Guide to Column Ordering & Stacking in Bootstrap 3 Bootstrap 3's responsive grid is powerful, but getting columns to stack nicely in the desired order can be tricky. Here are some working examples and guidance that will help to make your responsive design life easier. You will find some tricks on using Bootstrap's push and