MyPhoto is looking pretty bare right now, so let's take a look at integrating some Bootstrap components into our sections. First, ensure that as per the setup instructions in Chapter 1, Revving up Bootstrap, you have added Bootstrap's JavaScript library and its dependency, jQuery:
<script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"> </script>
The first component we will integrate is Bootstrap's jumbotron.
The jumbotron component is essentially a very simple visual cue that helps draw attention to certain content. It is generally used as a splash to offer immediate information to the user. That is exactly what we will be doing with it.
In the Welcome
section of our page, nest a jumbotron element into the container element:
<div class="container-fluid myphoto-section bg-myphoto-light"> <div class="container"> <div class="jumbotron">...