Customizing the jumbotron

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 ...

Get Bootstrap Site Blueprints now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.