In this section, we'll customize the jumbotron to display our client's big welcome message with stylistic touches inline with her mockup. This will include adding a large background image, enlarging the welcome message text, and then adjusting its presentation for multiple viewports.

In index.html, find the following markup:

<!-- INTRO SECTION -->
<section id="welcome" class="jumbotron">
  <div class="container">
    <h1><strong>Big</strong> Welcome Message</h1>
    <p>Ingenious marketing copy. And some <em>more</em> ingenious marketing copy.<a href="#features" class="btn btn-lg btn-primary pull-right">Learn more <span class="icon fa fa-arrow-circle-down"></span></a></p>
  </div>
</section>

At present, with only default Bootstrap styles in place, the result looks like the following screenshot:

After completing the following steps, our jumbotron should look like the following screenshot:

Let's start by expanding the height of our jumbotron and putting our desired background image in place:

Next, let's use a media query to place our background image for medium screens and up (991px, according to the current default Bootstrap media query breakpoint values):

Next, we can style our big marketing message for maximum impact.

Refining the jumbotron message design

Our client wants the welcome message in the jumbotron to be extra big. Bootstrap's jumbotron styles increase the font size by 150 percent. We want to enhance the results further. We also want to constrain the width of the message on wide screens and put a dark translucent box behind it.

Our current results work well for extra-small screens:

We can, however, improve the contrast of our text by placing a translucent dark overlay behind the text. Let's do that here by performing the following steps:

1. In index.html, add a new div tag inside the jumbotron container class and above the h1 heading and paragraph. Give this new div tag a class of welcome-message:

   <section id="welcome" class="jumbotron">
     <div class="container">
       <div class="welcome-message">
         <h1><strong>Big</strong> Welcome Message</h1>
         <p>Ingenious marketing copy. And some <em>more</em> ingenious marketing copy.<a href="#features" class="btn btn-lg btn-primary pull-right">Learn more <span class="icon fa fa-arrow-circle-down"></span></a></p>
       </div><!-- /.welcome-message -->
     </div>
   </section>

2. Now to create some styles for this new div, we will perform the following steps:
   • Give it a translucent dark background using HSLA.
   • Stretch it to fill the full width and height of our jumbotron by positioning it as absolute and setting its top, bottom, left, and right values to 0.
   • Position the jumbotron itself as relative using the welcome ID so that it will anchor our absolute-positioned welcome message.
   • Add internal padding to the welcome message.
   • Use the provided strong tag to transform the word Big to uppercase and increase its font size.

     #welcome {
         ...
          position: relative;
          .welcome-message {
         background-color: hsla(0,0,1%,0.4);
         position: absolute;
         top: 0;
         bottom: 0;
            left: 0;    
         right: 0;
         padding: 30px 40px;
            strong {
              font-size: 1.5em;
              text-transform: uppercase 
            }
         }
        ...
     }

3. Save the file, compile it to CSS, and refresh your browser. You should see the background darken and the text stand out more clearly against it, as shown in the following screenshot:
   
4. Next, we can address the @screen-sm breakpoint. We've already written a media query for this breakpoint in order to increase the jumbotron height to 480px. Within this same breakpoint, we can add rules to do the following:
   • Position the container as relative to make it our new anchor point, which will push our welcome message away from the top and left edges
   • Push the right edge 20 percent from the right
   • Set the bottom edge to auto so that it can stretch to fit our content
   • Set the word Big to display block and fill its own line

     @media (min-width: @screen-sm-min) {
         height: 480px;
         .container {
           position: relative;
         }
         .welcome-message {
           right: 20%;
           bottom: auto;
           strong {
             display: block;
           }
         }    
     }

5. Save the file, compile it to CSS, and refresh your browser. You should see the following result:
   
6. Finally, let's address the medium and large viewports. We'll constrain the width a bit more. This can all be done under the previously created @screen-md-min media query:

   @media (min-width: @screen-md-min) {
        ...
       .welcome-message {
       right: 50%;
        }
   }

7. Save the file, compile it to CSS, and refresh your browser. You should see the following result in a medium viewport:
   

Mission accomplished!

Our customized jumbotron is finished, providing the large welcome message our client has asked for including the ability to adapt to tablet- and phone-sized viewports, which we've accomplished efficiently with a mobile-first approach.

Now we're ready to move on to the features list.