Javatpoint Logo
Javatpoint Logo

Bootstrap Jumbotron

A Bootstrap jumbotron specifies a big box for getting extra attention to some special content or information. It is displayed as a grey box with rounded corners. It can also enlarge the font sizes of the text inside it.

You can put any valid HTML or other Bootstrap elements/ classes inside a jumbotron.

The class .jumbotron within the <div> element is used to create a jumbotron.

Jumbotron Inside Container

The Inside container is used in jumbotron, if you want the jumbotron to not extend to the edge of the screen.

Put the jumbotron inside the <div class="container">.


Test it Now

Jumbotron Outside Container

It is used when you want the jumbotron to extend to the screen edges.

Put the jumbotron outside the <div class="container">.


Test it Now

Full-width Jumbotron

To get a jumbotron without rounded borders, you have to add the .jumbotron-fluid class and a .container or .container-fluid inside it.


Test it Now

Bootstrap Page Header

A page header is like a section divider. It adds a horizontal line under the heading.

The .page-header class is used to create a page header.


Test it Now
Next TopicBootstrap Button

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA