Uncategorized

Lesson 9 – Bootstrap Jumbotron

Jumbotron, commonly called a Hero area, is normally a big section immediately underneath the Navbar. It is actually the website’ section which contains its major call of action and other buttons such as “Book Now” or “Learn More!” In Bootstrap’s own words, “This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.”

Just like Navbar, it is particularly easy to create all kinds of jumbotrons in Bootstrap. Let us see how it is done. In fact, it is a piece of cake to create a jumbotron in Bootstrap. All you have to do is to add the “jumbotron” class to the parent div which contains all the attention-grabbing content. Here is an example of a simple Jumbotron created in Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Jumbotron</title>
</head>
<body>
    <div class="jumbotron bg-dark text-white">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
      </div>
    [block]0[/block]
    [block]1[/block]
</body>
</html>

Here is the output of the above code.

It is also possible to remove the rounded corners and make the jumbotron extend to the full width of the screen. You can perform this task simply by replacing the “.jumbotron” class with the “.jumbotron-fluid” class. Similarly, you also need to add a “.container” and “.container-fluid” class inside the jumbotron as well. Here is an example of this kind of jumbotron.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Jumbotron</title>
</head>
<body>
    <div class="jumbotron jumbotron-fluid bg-dark text-white">
        <div class="container">
          <h1 class="display-4">This is a Fluid jumbotron</h1>
          <p class="lead">This kind of jumbotron extens to the entire width of the screen.</p>
        </div>
      </div>
    [block]2[/block]
    [block]3[/block]
</body>
</html>

Now, our jumbotron will look like as following.

In the next lesson, we will study Bootstrap List Groups.