How it works…

The code in this recipe is really simple. A lot of the complexity has been resolved by Bootstrap giving us proper classes to use. This was made even easier by the careful class naming by Bootstrap developers. All the Flexbox-related class names reflect the underlying Flexbox properties and values, so it is easy to guess what each class will do once you know how Flexbox works.

In this specific recipe, the way this layout was achieved is as follows: in step 1, the first div holds the introductory heading for the recipe, as well as the two paragraphs with text. The second div initially only has the container class. In step 2, we add two additional classes to this div: d-flex and flex-wrap.

As explained earlier, the d-flex class ...

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.