In bootstrap, Jumbotron is a lightweight, tiny grey rounded corners box to showcase some important information that wants to seek the user's attention.
To create a jumbotron, use <div>
element with .jumbotron
class as shown below.
The above example will return the result as shown below.
We can place all the valid HTML elements in jumbotron, including bootstrap elements, based on our requirements.
If you want to make jumbotron full-width and without rounded corners, you have to add .jumbotron-fluid
class to <div>
element and add .container
or .container-fluid
element inside of jumbotron like as shown below.
The above example will return the result as shown below.
This is how we can use bootstrap jumbotron in our applications to create lightweight content showcasing units based on our requirements.