O'Reilly logo

Sass and Compass Designer's Cookbook by Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required