Bootstrap Jumbotron

Bootstrap jumbotron is a rounded big grey box that highlights some special content. It has by default padding around the content.

Note: A jumbotron specifies a big grey rounded box for showing extra attention to the important information.It enlarges the font sizes of the text.

Follow The Following Steps to make Jumbotron:

Step: Bootstrap jumbotron can be created by adding .jumbotron to the container(<div>) class.

Jumbotron Example

Bootstrap Tutorial

Bootstrap is the most popular CSS Framework.

General Syntax

		<div class="jumbotron">  </div>

Try It Now

Source Code

	
		<div class="container my-2">
    <div class="jumbotron">
          <p class="mt-4">
               <strong class="general_syntax--heading">
                  Learn Bootstrap Jumbotron
                </strong>
           </p>
        <p>Bootstrap is the world most popular CSS framework.</p>
    </div>
</div>

Try it yourself

Source Code : Output

Learn Bootstrap Jumbotron

Bootstrap is the world most popular CSS framework.

Note: Bootstrap .jumbotron is used to assign the parent container base class. It generates default padding inside the jumbotron as well as enlarges the font size of the text that is exists inside the jumbotron.

Full-width Jumbotron

Step to create full-width jumbotron :

Step:To create full-width jumbotron without rounded border, you have to assign .jumbotron along with .jumbotron-fluid to the jumbotron parent container base class.

General Syntax

		<div class="jumbotron jumbotron-fluid"></div>

Try It Now

Source Code

	
		<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <b>Full-width Jumbotron</b>
        <p>Bootstrap is the most popular CSS Framework</p>
    </div>
</div>

Try it yourself

Source Code : Output

Full-width Jumbotron

Bootstrap is the most popular CSS Framework

A full-width jumbotron does not have a rounded border while a normal jumbotron has a rounded border. To make full-width jumbotron assign .jumbotron as well as .jumbotron-fluid to the jumbotron parent container.

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS