Tutorial on How to Create Bootstrap 3 Jumbotron

Bootstrap jumbotron indicates a big box for calling extra attention to some special content or information. It is a gray division with a rounded corner. The Bootstrap jumbotron enlarges the font sizes of the text inside it. Bootstrap jumbotron can be used inside container or container fluid and outside container or container fluid.

To use a jumbotron you need to give the class name .jumbotron to a div

Example:

jumbotron inside container or container fluid

the jumbotron inside a container or container fluid does not cover 100% of media width and showing its rounded corner and the other property is displayed.

Example:

Try it yourself

Bootstrap Jumbotron heading insede container or container fluid

a sample paragraph on jumbotron, which indicates a big box for calling extra attention to some special content or information insede container or container fluid

normal heading insede container or container fluid

normal para insede container or container fluid

jumbotron outside container or container fluid

the jumbotron outside a container or container fluid covers 100% of media width and it not showing its rounded corner and the other property is displayed.

Example:

Try it yourself

Bootstrap Jumbotron heading outside container or container fluid

a sample paragraph on jumbotron, which indicates a big box for calling extra attention to some special content or information outside container or container fluid

normal heading outside container or container fluid

normal para outside container or container fluid

In this post, you have learned how jumbotron works.

Please provide your valuable comments to make the site better and more useful

Thanks for reading.

Share The Post On -

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.