Bootstrap Jumbotron

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

Follow The Following Steps to create Bootstrap 4 jumbotron:

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">
  <b>Jumbotron Heading</b>
</div>

Try it now

Source Code

          <div class="container mt-4">
  <div class="jumbotron">
    <b>Learn Bootstrap Jumbotron</b>
    <p class="text-justify">Bootstrap is the world most popular CSS framework.</p>
  </div>
</div>

Try it now

Source Code: Output

Learn Bootstrap Jumbotron

Bootstrap is the world most popular CSS framework.

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.

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

Bootstrap 4 Full-width Jumbotron

Steps to create bootstrap 4 full-width jumbotron :

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

General Syntax

      <element class="jumbotron jumbotron-fluid">Full With Jumbotron</element>

Try it now

Source Code

          <div class="jumbotron jumbotron-fluid mb-3">
  <div class="container">
    <b>Full-width Jumbotron</b>
    <p class="text-justify">Bootstrap is the most popular CSS framework.</p>
  </div>
</div>

Try it now

Source Code: Output

Full-width Jumbotron

Bootstrap is the most popular CSS framework.

Note: 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.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4