Jumbotron

Bootstrap Jumbotron - examples & tutorial

Responsive Jumbotron built with Bootstrap 5. Examples of classic hero component, with background image, with navbar and many other combinations.

To learn more read Card Docs.

Basic example

Hello world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

HTML


          <!-- Jumbotron -->
          <div class="p-4 shadow-4 rounded-3" style="background-color: hsl(0, 0%, 94%);">
            <h2>Hello world!</h2>
            <p>
              This is a simple hero unit, a simple jumbotron-style component for calling extra
              attention to featured content or information.
            </p>

            <hr class="my-4" />

            <p>
              It uses utility classes for typography and spacing to space content out within the
              larger container.
            </p>
            <button type="button" class="btn btn-primary">
              Learn more
            </button>
          </div>
          <!-- Jumbotron -->

Background image

Heading

Subheading

Call to action

HTML


          <!-- Jumbotron -->
          <div
            class="p-5 text-center bg-image rounded-3"
            style="
              background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');
              height: 400px;
            "
          >
            <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
              <div class="d-flex justify-content-center align-items-center h-100">
                <div class="text-white">
                  <h1 class="mb-3">Heading</h1>
                  <h4 class="mb-3">Subheading</h4>
                  <a class="btn btn-outline-light btn-lg" href="#!" role="button">Call to action</a>
                </div>
              </div>
            </div>
          </div>
          <!-- Jumbotron -->

With navbar

Jumbotron combined with a Navbar component.

Heading

Subheading

Call to action

HTML


          <header>
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg navbar-light bg-white">
              <div class="container-fluid">
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarExample01"
                  aria-controls="navbarExample01"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarExample01">
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item active">
                      <a class="nav-link" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
            <!-- Navbar -->

            <!-- Jumbotron -->
            <div class="p-5 text-center bg-light">
              <h1 class="mb-3">Heading</h1>
              <h4 class="mb-3">Subheading</h4>
              <a class="btn btn-primary" href="" role="button">Call to action</a>
            </div>
            <!-- Jumbotron -->
          </header>

Background image with navbar

Header with background image might help to outstand your call to action elements by catching the eyes to some beautiful image in the background.

To provide a proper contrast it's highly recommended to use a mask. You can change the color and the opacity of the mask by manipulating RGBA code.

You also must set the height of the background image, otherwise, the component will collapse. In the example below, we set the height to 400px.

We use flexbox utilities to center the content vertically and horizontally.

Heading

Subheading

Call to action

HTML


          <header>
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg navbar-light bg-white">
              <div class="container-fluid">
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarExample01"
                  aria-controls="navbarExample01"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarExample01">
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item active">
                      <a class="nav-link" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
            <!-- Navbar -->

            <!-- Background image -->
            <div
              class="p-5 text-center bg-image"
              style="
                background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');
                height: 400px;
              "
            >
              <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
                <div class="d-flex justify-content-center align-items-center h-100">
                  <div class="text-white">
                    <h1 class="mb-3">Heading</h1>
                    <h4 class="mb-3">Subheading</h4>
                    <a class="btn btn-outline-light btn-lg" href="#!" role="button"
                      >Call to action</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <!-- Background image -->
          </header>

If you need to set a different height of the background image for large and small devices it's better to set it via regular CSS instead of inline CSS.

In the example below, we give it an id="intro-example" and set a height of 400px for small devices and 600px for larger.

Learn Bootstrap 5 with MDB

Best & free guide of responsive web design

Start tutorial Download MDB UI KIT

HTML


          <header>
            <!-- Intro settings -->
            <style>
              /* Default height for small devices */
              #intro-example {
                height: 400px;
              }

              /* Height for devices larger than 992px */
              @media (min-width: 992px) {
                #intro-example {
                  height: 600px;
                }
              }
            </style>

            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg navbar-light bg-white">
              <div class="container-fluid">
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarExample01"
                  aria-controls="navbarExample01"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarExample01">
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item active">
                      <a class="nav-link" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
            <!-- Navbar -->

            <!-- Background image -->
            <div
              id="intro-example"
              class="p-5 text-center bg-image"
              style="background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');"
            >
              <div class="mask" style="background-color: rgba(0, 0, 0, 0.7);">
                <div class="d-flex justify-content-center align-items-center h-100">
                  <div class="text-white">
                    <h1 class="mb-3">Learn Bootstrap 5 with MDB</h1>
                    <h5 class="mb-4">
                      Best & free guide of responsive web design
                    </h5>
                    <a
                      class="btn btn-outline-light btn-lg m-2"
                      href="https://www.youtube.com/watch?v=c9B4TPnak1A"
                      role="button"
                      rel="nofollow"
                      target="_blank"
                      >Start tutorial</a
                    >
                    <a
                      class="btn btn-outline-light btn-lg m-2"
                      href="https://mdbootstrap.com/docs/standard/"
                      target="_blank"
                      role="button"
                      >Download MDB UI KIT</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <!-- Background image -->
          </header>

Fixed navbar

You can stick the navbar to the top of the window by using .fixed-top class. Thanks to this whenever you scroll the page the navbar will be always visible.

Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements. In the examples below, we add margin-top: 58px; (height of the navbar) to the jumbotron and background image for this purpose.

Heading

Subheading

Call to action

Scroll down

HTML


          <header>
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
              <div class="container-fluid">
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarExample01"
                  aria-controls="navbarExample01"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarExample01">
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item active">
                      <a class="nav-link" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
            <!-- Navbar -->

            <!-- Jumbotron -->
            <div class="p-5 text-center bg-light" style="margin-top: 58px;">
              <h1 class="mb-3">Heading</h1>
              <h4 class="mb-3">Subheading</h4>
              <a class="btn btn-primary" href="" role="button">Call to action</a>
            </div>
            <!-- Jumbotron -->
          </header>

Heading

Subheading

Call to action

Scroll down

HTML


          <header>
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
              <div class="container-fluid">
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarExample01"
                  aria-controls="navbarExample01"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarExample01">
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item active">
                      <a class="nav-link" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
            <!-- Navbar -->

            <!-- Background image -->
            <div
              class="p-5 text-center bg-image"
              style="
                background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');
                height: 400px;
                margin-top: 58px;
              "
            >
              <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
                <div class="d-flex justify-content-center align-items-center h-100">
                  <div class="text-white">
                    <h1 class="mb-3">Heading</h1>
                    <h4 class="mb-3">Subheading</h4>
                    <a class="btn btn-outline-light btn-lg" href="#!" role="button"
                      >Call to action</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <!-- Background image -->
          </header>

Animated navbar

You can achieve a very impressive effect by using our animated navbar, which is transparent on start, and change the color after the scroll.

Click the button below to see the full-screen demo.

Full screen demo

HTML


            <!--Main Navigation-->
            <header>
              <!-- Animated navbar-->
              <nav class="navbar navbar-expand-lg fixed-top navbar-scroll">
                <div class="container-fluid">
                  <button
                    class="navbar-toggler ps-0"
                    type="button"
                    data-mdb-toggle="collapse"
                    data-mdb-target="#navbarExample01"
                    aria-controls="navbarExample01"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                  >
                    <span
                      class="navbar-toggler-icon d-flex justify-content-start align-items-center"
                    >
                      <i class="fas fa-bars"></i>
                    </span>
                  </button>
                  <div class="collapse navbar-collapse" id="navbarExample01">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                      <li class="nav-item active">
                        <a class="nav-link" aria-current="page" href="#intro">Home</a>
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link"
                          href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
                          rel="nofollow"
                          target="_blank"
                          >Learn Bootstrap 5</a
                        >
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link"
                          href="https://mdbootstrap.com/docs/standard/"
                          target="_blank"
                          >Download MDB UI KIT</a
                        >
                      </li>
                    </ul>

                    <ul class="navbar-nav flex-row">
                      <!-- Icons -->
                      <li class="nav-item">
                        <a
                          class="nav-link pe-2"
                          href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
                          rel="nofollow"
                          target="_blank"
                        >
                          <i class="fab fa-youtube"></i>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link px-2"
                          href="https://www.facebook.com/mdbootstrap"
                          rel="nofollow"
                          target="_blank"
                        >
                          <i class="fab fa-facebook-f"></i>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link px-2"
                          href="https://twitter.com/MDBootstrap"
                          rel="nofollow"
                          target="_blank"
                        >
                          <i class="fab fa-twitter"></i>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link ps-2"
                          href="https://github.com/mdbootstrap/mdb-ui-kit"
                          rel="nofollow"
                          target="_blank"
                        >
                          <i class="fab fa-github"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </nav>
              <!-- Animated navbar -->

              <!-- Background image -->
              <div
                id="intro"
                class="bg-image"
                style="
                  background-image: url(https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp);
                  height: 100vh;
                "
              >
                <div class="mask text-white" style="background-color: rgba(0, 0, 0, 0.8);">
                  <div class="container d-flex align-items-center text-center h-100">
                    <div>
                      <h1 class="mb-5">This is title</h1>
                      <p>
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae
                        laboriosam numquam expedita ullam saepe ipsam, deserunt provident corporis,
                        sit non accusamus maxime, magni nulla quasi iste ipsa architecto? Autem!
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Background image -->
            </header>
            <!--Main Navigation-->

If you want to customize the colors in the animated navbar you need to overwrite the following styles.

Note: These are the default settings. If you don't want to change anything then you don't need to add or modify the following code.