Tutorials Tonight's Logo
Follow Us

BOOTSTRAP 4 JUMBOTRON


The Jumbotron component of bootstrap is a flexible component that is used to showcase some special content on your website.

You can use .jumbotron class with <div> tag to create a jumbotron. You can wrap any valid HTML element with jumbotron.

The Bootstrap's jumbotron CSS property are :

Below is an example of 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
<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>
▶ Run the code


Full-width Jumbotron

You can see in the above example the jumbotron box as a round border. To remove the round border and get full-width jumbotron, add the .jumbotron-fluid class and add a .container or .container-fluid within.

Here is an example below, look at its border-radius and width. (Play the code to see better)

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
<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>
▶ Run the code

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.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Bootstrap 4 Images

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.