Book Image

Bootstrap Site Blueprints

Book Image

Bootstrap Site Blueprints

Overview of this book

Table of Contents (16 chapters)
Bootstrap Site Blueprints
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

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 in place, the result looks like the following screenshot:

After completing the following steps, our jumbotron should look like the...