Bootstrap Site Blueprints

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