BOOTSTRAP 4 JUMBOTRON

Bootstrap Jumbotron

Jumbotron in bootstrap is a special unit, it is used for some extra attention to some important information. To create a jumbotron use .jumbotron class with the div element.

You can put valid HTML elements inside the jumbotron.

The jumbotron is a simple, but effective, way to call the attention of the visitor. It can be used to display a banner, or some call to action, or to display a set of instructions.

The Bootstrap's jumbotron CSS property are:

• padding: 2rem 1rem;
• margin-bottom: 2rem;
• background-color: #e9ecef;
• border-radius: 0.3rem;

Below is an example of the jumbotron. See how it stands out from other elements.

Code:

<div class="jumbotron">
  <h1 class="display-4">Learn To Code</h1>
  <p class="lead">Using Coding You can build anything you can imagine digitally, only limit is your imagination.</p>
  <a href="https://www.tutorialstonight.com" target="_blank" class="btn btn-info" role="button">Start Today</a>
</div>

Full-width Jumbotron

You can see in the above example the jumbotron box has round corners and also large inside padding.

To remove the round corners and padding of the jumbotron box, add the .jumbotron-fluid class together with the .jumbotron class.

Here is an example of jumbotron with .jumbotron-fluid class.

Code:

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <p class="h1">Learn Javascript</p>
    <p class="lead">Javascript is one of most popular programming language in the world. Javascript covers both front-end and back-end and comes with a bunch of libraries.</p>
    <a href="https://www.tutorialstonight.com/js/" target="_blank" class="btn btn-info">Start Javascript Today</a>
  </div>
</div>

Jumbotron with Image

You can also add a background image to the jumbotron. by using background-image: url('image.jpg').

Example:

Code:

<div class="jumbotron" style="background-image: url("../assets/bootstrap/user.png")">
  <p class="h1">Office users</p>
  <p class="lead">Our office has a lot of users. They are all using Bootstrap.</p>
  <a href="https://www.tutorialstonight.com" target="_blank" class="btn btn-dark" role="button">Start Today</a>
</div>