In this recipe, we will only use the default Bootstrap 4 classes to demonstrate some basic gotchas related to the default, non-flexbox-enabled grid. Practically, this means that we will not even have to touch any CSS, as all the styling will be set through the class attributes in the appropriate HTML elements.
To follow the recipe easier, refer to the code provided with the book (folder: chapter02-06 of the codebase).
- Let's add all the files we'll use in this recipe:
touch app/partial/_chapter-02-06-html.ejs app/partial/_recipe02-
06-css.ejs main-02-06.scss- Add the following code to
app/partial/_chapter-02-06-html.ejs:
<div class="container-fluid">
<div class="row bg-inverse m-4 p-4 lead">
<div class="col-md-6 bg-success p-3 text-white">This div takes
up 6 of 12 columns above the <code>md</code> breakpoint. Below
the <code>md</code> breakpoint, it stacks...
