Implementing semantic layouts with Bootstrap

Bootstrap 4 has a 12-column grid and predefined grid classes by default. You can also use the grid mixins to apply the grid on selectors without predefined classes to generate more semantic CSS for individual grid columns. In this recipe you will learn how to use these grid mixins.

Getting ready

In this recipe, you will rebuild the layout from the Applying the grid on your design recipe of Chapter 9, Building Layouts with Sass, using Bootstrap 4. Other ways to implement the same layout with Sass can be found in the Mobile first and responsive grids recipe of Chapter 10, Building Grid-based Layouts with Susy and Sass, the Creating semantic grids with Foundation recipe of Chapter 11, Foundation and Sass, and the Semantic grids with Neat recipe of Chapter 13, Meeting The Bourbon Family.

Read the Downloading and installing Bootstrap recipe of this chapter; you will need it for the first step of this recipe.

How to do it...

For this recipe you should perform...