A jumbotron indicates a big box for calling extra attention to some special content or information. A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.
Bootstrap Jumbotron is a responsive component whose main goal is to draw the visitor’s attention or highlight a special piece of information. Inside a Jumbotron, you can make use of almost any other Bootstrap code to further increase its engagement value.
Uses of Jumbotron:
- Image showcase
- Highlighting content
- Introduction to a Certain Topic
Tip: Inside a jumbotron, you can put nearly any valid HTML, including other Bootstrap elements/classes.
Use a <div> element with class jumbotron to create a jumbotron:
Place the jumbotron inside the **<div class="container">** if you want the jumbotron to NOT extend to the edge of the screen.
Place the jumbotron outside the **<div class="container">** if you want the jumbotron to extend to the screen edges