Home » Bootstrap Jumbotron

Bootstrap Jumbotron

by Online Tutorials Library

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

You may also like