How it works...

In this simple recipe, we have only made one custom class to color the wrapping container white. All the other classes are readily available in the default Bootstrap 4 code.

In the website with the completed recipe, we can see that the several available color classes that Bootstrap 4 has out of the box offer plenty of possibilities for creating decent-looking layouts on the fly.

Toward the bottom of the page, we can see examples of vertical text alignment, achieved with the use of Bootstrap's own align-text-top and align-text-bottom classes. The highlighted effect is the result of using the <mark> element in our HTML code.

At the very bottom of the page, we can see Bootstrap's helper classes of d-block and d-inline used on the <span> and <div> elements respectively, as examples of the possibility provided in Bootstrap 4 to easily change the regular display property of HTML elements with appropriate CSS classes.

Finally, as a hint to how to start experimenting with text and Sass in Bootstrap 4, there are some guidelines in the HTML comments at the bottom of recipe3.ejs.