O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Customizing the jumbotron

The jumbotron is a Bootstrap component highlighting the key message of your website. More information about the jumbotron and its HTML markup can be found at the following URL: http://v4-alpha.getbootstrap.com/components/jumbotron/.

In this section, we'll customize the jumbotron to display our client's big welcome message with stylistic touches in line 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 class="jumbotron" id="welcome"> <div class="container"> <h1 class="display-3"><strong>Big</strong> Welcome Message</h1> <p class="lead"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required