How it works...

In step 1 of this recipe, we start off with the addition of all the new files and folders needed for it to work.

In step 2, we add the font-awesome bower component. This will allow us to call font-awesome classes locally (without linking to a CDN).

In step 3, we download the image that we will use as our jumbotron background, just under the navbar.

In step 4, we add the recipe-specific SCSS code. This code calls our Bootstrap 4 default SCSS and font-awesome from bower_components.

In step 5, we add the code to the recipe-specific navbar.

Step 6 is very important, as it introduces a new concept in Bootstrap 4 related to the jumbotron component. In Bootstrap 4, jumbotron makes it easier to create a great call-to-action space, with headings, paragraphs, buttons, and so on. The most important thing to remember is that all this content needs to be surrounded with a div tag, with the  jumbotron and jumbotron-fluid classes. We also include the call to a custom class of jumbotron-background:

      <div class="jumbotron jumbotron-fluid mt-5 jumbotron-background">
      ...
      </div>

The rest of the code in step 6 is pretty easy to understand. We are using font-awesome icons for better visual effects and a table as an example of a responsive table that can be added easily to a web page such as this.

The remaining steps in this recipe will make all the includes work.