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 :

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

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

<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 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)

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