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.
The steps here are similar to the Getting ready section of the Making custom buttons recipe.
Perform the following steps:
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";
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
Finally, you can test the grid with the HTML code from the Applying...