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:

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

Learn To Code

Using Coding You can build anything you can imagine digitally, the only limit is your imagination.

Start Today

Code:

Example

<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>
Try It

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.

Learn Javascript

Javascript is one of the most popular programming language in the world. Javascript covers both front-end and back-end and comes with a bunch of libraries.

Start Javascript Today

Code:

Example

<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>
Try It

Jumbotron with Image

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

Example:

Office users

Our office has a lot of users. They are all using Bootstrap.

Start Today

Code:

Example

<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>
Try It

Points to remember:

  1. Jumbotron is used for a showcase of special elements.
  2. Use .jumbotron class on the div element to create bootstrap's jumbotron.
  3. For full width and no border-radius in jumbotron use additional modifier .jumbotron-fluid and add a container or container-fluid inside.