How it works...

In step 1, we add the partial _defaultGrid.ejs to our index.ejs layout. This helps us keep our code modular, as discussed before.

In step 2, we add our _defaultGrid.ejs partial.

In step 3, we add the HTML structure, and this is the recipe-specific code. The code consists of five div tags, with the first four div tags having the class of container-fluid. Each div also has the helper padding classes, p-*, and the helper margin classes, m-*. Each div also has its own unique ID, assigned based on the position in the HTML structure: one, two, three, four, or five.

In step 4, we add the calls to the four tooltip components in the custom script tag just above the closing </body> tag.

In step 5, we start with the simple .tooltip-inner ...

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.