- 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 horizontally (since it takes up the full width of the screen at those resolutions). </div> <div class="col-md-6 bg-danger text-white p-3">This column acts exactly like the previous one, but a different effect is achieved using different classes to color the text and the background.</div> ...
