Lesson 9 - Bootstrap - Jumbotron and Badges

In the previous lesson, Bootstrap - Advanced forms, we finished forms. In today's Bootstrap tutorial, we're going to introduce the Jumbotron component and badges.

Jumbotron

This grandiosely named component goes along with Bootstrap from the very start and you've surely stumbled across it already. It's a large info box with a call-out and typically with some short information followed by a button. It has its place on front pages where it's used for presenting key ideas of the service.

The basic HTML structure of the component looks as follows:

<div class="jumbotron">
    <h1 class="display-3">ICT.social</h1>
    <p class="lead">A social network where you can learn everything needed to receive a fairytale-like salary in IT companies or to realize your own IT start-up. Everything in one place, completely free or for the lowest price on the market.</p>
    <hr class="my-4">
    <p>Are you ready? Just click.</p>
    <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">Make me a professional</a>
    </p>
</div>

We wrap the entire content in the <div> element with the .jumbotron class. The main call-out is placed in the <h1> heading to which we assign the .display-3 class to make the text even bigger. We've already described this in the lesson about typography in Bootstrap. We highlight the text in the paragraph using the .lead class. If you're wondering what does the my-4 class of the <h1> element do, it adds a top and bottom margin to it. We're yet about to get to the spacing utilities.

The result:

Fluid jumbotron

We can render Jumbotron without the round corners so it fills the entire width of the parent element. We can achieve it by assigning the .jumbotron-fluid class to the <div> with the Jumbotron and wrapping the content in another <div> element with the .container class.

<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-3">ICT.social</h1>
        <p class="lead">A social network where you can learn everything needed to receive a fairytale-like salary in IT companies or to realize your own IT start-up. Everything in one place, completely free or for the lowest price on the market.</p>
        <hr class="my-4">
        <p>Are you ready? Just click.</p>
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Make me a professional</a>
        </p>
    </div>
</div>

And the result:

Badges

You surely already know tags/badges from various websites. It's usually a small rectangle with some text such as "new", "discount" or simply with some categories an article belongs to ("local", "news", "conference"). Bootstrap implements these tags as badges. Typically, we add these to headings, buttons or anywhere on the website.

We can add badges anywhere as <span> elements with the .badge class. Then we assign a second class to it according to the color of the badge:

• .badge-primary - Primary color, blue by default
• .badge-secondary - Second color, gray by default
• .badge-success - Green for discounts, etc.
• .badge-danger - Red for errors, etc.
• .badge-warning - Yellow for news
• .badge-info - Neutral blue for neutral tags
• .badge-light - Light gray
• .badge-dark - Almost black
• .badge-white - Pure white

The HTML code of a badge can look something like this:

<span class="badge badge-warning">new</span>

Badges in headings

Let's have a look on how badges would look like in headings:

Badges in buttons

Badges can be placed inside buttons as well. Even though we're going to discuss buttons next time, you're surely familiar with the <button> element, and the fact that the .btn class together with a color class will be assigned to it shouldn't surprise you Badges in buttons are usually used for rendering a number of items which the user can work with using the button. We can provide a <span> with the .sr-only class and more information for screen readers.

Badges as pills

We can style badges with rounded corners to make them look like "pills", by assigning the .badge-pill class. Except for the <span> elements, we can also use links to create badges.

In the next lesson, Bootstrap - List groups, we're going to talk about list groups which are universal components for lists.