Using the Jumbotron component

If you're new to Bootstrap, you may be asking yourself what the heck is a Jumbotron component. Jumbotron is used to feature a block of content, usually at the top of your page. This is your standard main feature block that you'll see on a number of websites. If you require something more sophisticated than a simple page title, Jumbotron is the component you'll want to use. Let's take a quick look at the code required to create this component:

<div class="jumbotron"> 
  <h1 class="display-3">Feature title</h1> 
  <p class="lead">This is a basic jumbrotron call to action</p> 
  <hr class="m-y-2"> 
  <p>This is some further description text for your main feature</p> 
  <p class="lead"> 
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> 
  </p> 
</div>

There are some new CSS classes here that we need to review, as well as some existing ones we have already learned about. Let's break down what's happening in the code:

The Jumbotron component is based off a <div> with a CSS class named .jumbotron. Within this <div>, you can pretty much use whatever text formatting tags you like. However, there are a few basics you should include to make it look good.
The first tag you'll see is the <h1> with a class of .display-3 on it. Since the Jumbotron is more of a "display" component, you'll want to beef up the size of your <h1> by using the optional class we learned about earlier in the book.
Next, you'll see a simple <p> tag for the feature's tagline. On that tag, there is a class named .lead. This class increases the base font size by 25% and sets the font-weight to 300 which is a lighter weight. Again, this gives the Jumbotron component more of a "feature" like look and feel.
After the tagline text, you'll see an <hr> tag with a class of .m-y-2 on it. If you remember, this is a utility spacing class. The -y in this case will add a margin above and below the <hr> tag.
Next we have another <p> tag with some additional descriptive text in it.
Finally, we have a <button> wrapped in a <p> tag so that there is a conclusion to the call to action in the Jumbotron block. Note that the user of the .btn-lg class will produce a larger-sized button.

After you've coded up your Jumbotron component, it should look like this in the browser:

By default, the Jumbotron component will stretch to fit the width of the column it is contained within. In most cases, you'll likely want it to span the entire width of your page. However, in some cases, you might want a Jumbotron to stretch from one edge of the browser to the other without any horizontal padding on it. If this is the case, you need to add the .jumbotron-fluid class to the main <div> and make sure it is outside of a Bootstrap .container. Let's take a look at the following code to see what I mean:

<div class="jumbotron jumbotron-fluid"> 
  <div class="container"> 
    <h1 class="display-3">Feature title</h1> 
      <p class="lead">This is a basic jumbrotron call to action</p> 
  </div> 
</div>

As you can see, the .container <div> is now inside of the Jumbotron <div>. This is how you remove the horizontal padding on the section. Once completed, it should look like this in the browser:

That concludes the use of the Jumbotron component in Bootstrap 4. Next let's move on to learning how to use the Label component.

Previous Chapter

Adding validation to inputs

Next Chapter

Adding the Label component

Table of Contents for Bootstrap 4 – Responsive Web Design

Using the Jumbotron component

Table of Contents for
Bootstrap 4 – Responsive Web Design