Reusing Bootstrap's grid

In the Applying the flexbox grid on your design recipe in Chapter 8, Building a Layout with Less, you can read how to use Bootstrap's grid as a fallback for the flexbox grid. In this recipe, you will see how to create a CSS file that contains the style rules for Bootstrap's grid.

Getting ready

The steps here are similar to the Getting ready section of the Making custom buttons recipe.

How to do it...

Perform the following steps:

1. Create a bootstrapgrid.less file that contains the following lines of Less code:

   @import (reference) "mixins.less"; 
   @import (reference) "variables.less"; 
   @import (reference) "mixins/vendor-prefixes.less"; 
   * { 
     .box-sizing(border-box); 
   } 
   *:before, 
   *:after { 
     .box-sizing(border-box); 
   } 
   @import "grid.less";

2. Then, compile the bootstrapgrid.less file from the second step into CSS by running the following command in the console:

   lessc  bootstrapgrid.less bootstrapgrid.css
   

3. Finally, you...