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

Example:

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

Example:

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.

Example:

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.

Example:

Test it Now
Next TopicBootstrap Button




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA