Get up to 80 % extra points for free! More info:

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:

Jumbotron in Bootstrap
jumbotron.html

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:

Jumbotron in Bootstrap
jumbotron_flu­id.html

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 Bootstrap
badges_in_hea­dings.html

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 in Bootstrap
badges_in_but­tons.html

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.

Badges in Bootstrap
badges_pills_lin­ks.html

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


 

Previous article
Bootstrap - Advanced forms
All articles in this section
Bootstrap
Skip article
(not recommended)
Bootstrap - List groups
Article has been written for you by David Capka Hartinger
Avatar
User rating:
2 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn university David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.
Activities