# 
## Overview

Bootstrap 4 comes with a big grey box that calls extra attention to some special content or information. This box is called the **jumbotron**.

This box can be used for many purposes, as it can contain nearly any valid HTML, including other Bootstrap elements/classes.

Any content that requires special attention, i.e., the navbar, is usually put inside the jumbotron.

## How to use

Bootstrap 4's jumbotron is very easy to use. To create a jumbotron, use a <code>div</code> element with the class `jumbotron`, and you can put nearly any valid content inside it.

<html>
 <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 </head>
 <body>
   <div class="jumbotron">
     <h1 class="text-capitalize text-center text-primary">bootstrap jumbotron</h1>
     <p class="text-white">This is a box that contains important contents</p>
     <p class="text-info">Note: <br>The jumbotron has a grey color as default but it can be changed with <strong>CSS</strong> as used in this example.</p>
   </div>




   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
 </body>
</html>

.jumbotron{
    background-color: black;
}

codemirror

The jumbotron can be made to have a full width and be without rounded corners by simply using the <code>jumbotron-fluid</code> modifier class and adding a <code>container</code> or <code>container-fluid</code> within.

<html>
 <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 </head>
 <body>
   <div class="jumbotron jumbotron-fluid">
     <div class="container">
       <p class="text-info">This jumbotron has a full width and is without rounded corners</p>
     </div>
   </div>




   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
 </body>
</html>

/*.jumbotron{
    background-color: chocolate;
}*/

Bootstrap 4's jumbotron makes it easy for us to wrap lots of important content in one container at a time.

You can practice using it for a better understanding of how it works.

What is the Bootstrap 4 jumbotron?

 Overview Bootstrap 4 comes with a big grey box that calls extra attention to some special content or information. This box is called the jumbotron. This box can be used for many purposes, as it can contain nearly any valid HTML, including other Bootstrap elements/classes. Any content that requires special attention, i.e., the navbar, is usually put inside the jumbotron. How to use Bootstrap 4 s jumbotron is very easy to use. To create a jumbotron, use a div element with the class jumbotron, and you can put nearly any valid content inside it. 