Styling a pricing section using Bootstrap's default table classes

In this recipe, we will utilize default table-specific Bootstrap classes to achieve several variations on the same HTML structure.

Getting ready

Navigate to the recipe8 page of the chapter 3 website, and preview the final result that we are trying to achieve. To get this look, we will use several Bootstrap 4 classes, as follows:

• .table-responsive and .table
• .table-striped, .table-bordered, and .table-hover
• .table-inverse, .table-warning, .table-info, .table-danger, .table-success, and .table-sm
• .thead-default and .thead-inverse

The basic HTML structure will be repeated several times, with changes involving the use of various combinations of the aforementioned Bootstrap 4 classes.

How to do it...

1. Open the empty chapter3/start/app/recipe8.ejs file and add the following code to it:

      <div class="container mt-5">
       <h1>Chapter 3, Recipe 8:</h1>
       <p class="lead mb-5">Style a Price Section Using Bootstrap...