Developers Zone

How to create a Jumbotron in Bootstrap

Sujoy Karmakar

Here we learn to create a jumbotron on our website. Firstly, we need to know what the jumbotron is? So jumbotron is a big grey box with rounded corners. It gives a sentence or information extra attention. Basically, there are two types of the jumbotron. So we should learn these two types of the jumbotron.

How we use Jumbotron

  1. You can use it to highlight content or a specific part.
  2. Image Showcase.
  3. Make your article’s heading extra eye-catching.

Two Types of Jumbotron

We can create two types of jumbotron as per your requirement. Firstly, you can add a normal jumbotron. It provides the content a grey big box which has rounded corners. The font size is getting larger inside it. It also gives a few margins and padding to the section. So you don’t need to enlarge the font size in it.

Similarly, you can make a jumbotron that occupies the entire horizontal space of its parent. In other words, you can make a full-width jumbotron.

Bootstrap Classes for Jumbotron

We can use .jumbotron and .jumbotron-fluid .

create a jumbotron
Create a jumbotron

Here I’ve made a simple jumbotron. I just use .jumpbotron in .container class. Here you can notice that the class gives the passage extra padding. And put the heading and paragraph in a grey big box. But we don’t use them in the next passage. So we clearly identify the difference between using the class and without the class.


<!DOCTYPE html>
<html>

<head>
  <title>Blogs</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>


<body class="bg-light p-4">
  <div class="container">
    <div class="jumbotron ">
      <h1 class="display-4">This is a jumbotron</h1>
      <p class="lead">This is a jumbotron.</p>
      <hr class="my-4">
      <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
      </p>
    </div>

  </div>

  <div class="container">
    <h1 class="display-4">This is without jumbotron</h1>
    <p class="lead">This is without jumbotron.</p>
    <hr class="my-4">
    <p class="lead">
      <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </p>
  </div>

</body>
</html>

Here the codes.

How to showcase image

As web developers, we sometimes use a background image. We can show the background image in jumbotron. It must give an attractive look to your website.

Here we use a background image. Therefore, it appears in a new look.


<!DOCTYPE html>
<html>

<head>
  <title>Blogs</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<style>
  .jumbotron{
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.9) 100%),url(images/Developer-zone.jpg);
    background-size: cover;
    background-position: center;
  }
</style>
<body class="bg-light p-4">
  <div class="container">
    <div class="jumbotron ">
      <h1 class="display-4">This is a jumbotron</h1>
      <p class="lead">This is a jumbotron.</p>
      <hr class="my-4">
      <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
      </p>
    </div>

  </div>

  <div class="container">
    <h1 class="display-4">This is without jumbotron</h1>
    <p class="lead">This is without jumbotron.</p>
    <hr class="my-4">
    <p class="lead">
      <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </p>
  </div>

</body>
</html>

Here the codes.

I hope you can understand the use of jumbotron. Further, you want to learn how to use Bootstrap, then visit our website developers-zone. You also visit the official website of Bootstrap.

Exit mobile version