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.
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
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
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.
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 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:
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
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
.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.