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 class override, to left-align the text inside the tooltip components.