How it works…

There are several things happening in this recipe, which is why the end result is a great design that shows all the styling improvements brought about by the newest version of Bootstrap. To understand how exactly this layout was achieved, we need to go through each of the steps in this recipe.

In step 1, we added the usual container on top, with the heading that shows the recipe title, and the paragraphs under it that give some short explanation of the recipe. On this first container, we only used the margin and padding utility classes to space out the elements nicely.

The middle section of the code added in step 1 is a style tag, with a few CSS declarations that will be explained later in this section. The last few lines of ...

Get Bootstrap 4 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.