Jumbotron

Bootstrap jumbotron

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

Bootstrap Jumbotron is a responsive component which the main goal is to focus the visitor's attention or highlight a special piece of information.

Inside a Jumbotron, you can make use of almost any other Bootstrap code to further increase its engagement value.

Its flexibility lets you operate with images, enlarged fonts, different background styles, and CTA's.

Jumbotron use examples:

Project presentation
Article introduction
Image showcase

See a number of Bootstrap Jumbotron examples to familiarize yourself with its design.

Jumbotron with a background image

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

Create your beautiful website with MDBootstrap

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!

View project

Show code Edit in sandbox

HTML

        
            

        <div class="jumbotron card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient12.webp);">
          <div class="text-white text-center py-5 px-4">
            <div>
              <h2 class="card-title h1-responsive pt-3 mb-5 font-bold"><strong>Create your beautiful website with MDBootstrap</strong></h2>
              <p class="mx-5 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!
              </p>
              <a class="btn btn-outline-white btn-md"><i class="fas fa-clone left"></i> View project</a>
            </div>
          </div>
        </div>

Basic example

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

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.

Learn more

Show code Edit in sandbox

HTML

        
            

        <div class="jumbotron">
          <h2 class="display-4">Hello, world!</h2>
          <p class="lead">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>
          <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </div>

Fluid jumbotron

To make the jumbotron full width, and without rounded corners, add the .jumbotron-fluid modifier class and add either the .container or .container-fluid class within.

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

Show code Edit in sandbox

HTML

        
            

        <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <h2 class="display-4">Fluid jumbotron</h2>
            <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
          </div>
        </div>

Jumbotron with image

My adventure

Photography

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Show code Edit in sandbox

HTML

        
            

        <!-- Jumbotron -->
        <div class="jumbotron text-center">

          <!-- Title -->
          <h4 class="card-title h4 pb-2"><strong>My adventure</strong></h4>

          <!-- Card image -->
          <div class="view overlay my-4">
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).webp" class="img-fluid" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <h5 class="indigo-text h5 mb-4">Photography</h5>

          <p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

          <!-- Linkedin -->
          <a class="fa-lg p-2 m-2 li-ic"><i class="fab fa-linkedin-in grey-text"></i></a>
          <!-- Twitter -->
          <a class="fa-lg p-2 m-2 tw-ic"><i class="fab fa-twitter grey-text"></i></a>
          <!-- Dribbble -->
          <a class="fa-lg p-2 m-2 fb-ic"><i class="fab fa-facebook-f grey-text"></i></a>

        </div>
        <!-- Jumbotron -->

Jumbotron without padding MDB Pro component

Card title

Some quick example text to build on the card title and make up the bulk of the card's

Button

Show code Edit in sandbox

HTML

        
            

        <!-- Jumbotron -->
        <div class="jumbotron p-0">

          <!-- Card image -->
          <div class="view overlay rounded-top">
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(134).webp" class="img-fluid" alt="Sample image">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!-- Card content -->
          <div class="card-body text-center mb-3">

            <!-- Title -->
            <h3 class="card-title h3 my-4"><strong>Card title</strong></h3>
            <!-- Text -->
            <p class="card-text py-2">Some quick example text to build on the card title and make up the bulk of the card's</p>
            <!-- Button -->
            <a href="#" class="btn purple-gradient btn-rounded mb-4">Button</a>

          </div>

        </div>
        <!-- Jumbotron -->

Jumbotron with buttons

Material Design for Bootstrap

Powerful and free Material Design UI KIT

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam.

Show code Edit in sandbox

HTML

        
            

        <!-- Jumbotron -->
        <div class="jumbotron text-center">

          <!-- Title -->
          <h2 class="card-title h2">Material Design for Bootstrap</h2>
          <!-- Subtitle -->
          <p class="blue-text my-4 font-weight-bold">Powerful and free Material Design UI KIT</p>

          <!-- Grid row -->
          <div class="row d-flex justify-content-center">

            <!-- Grid column -->
            <div class="col-xl-7 pb-2">

              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam.</p>

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

          <hr class="my-4">

          <div class="pt-2">
            <button type="button" class="btn btn-blue waves-effect">Buy now <span class="far fa-gem ml-1"></span></button>
            <button type="button" class="btn btn-outline-primary waves-effect">Download <i class="fas fa-download ml-1"></i></button>
          </div>

        </div>
        <!-- Jumbotron -->

Jumbotron with image overlay

Photography

Jumbotron with image overlay

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur obcaecati vero aliquid libero doloribus ad, unde tempora maiores, ullam, modi qui quidem minima debitis perferendis vitae cumque et quo impedit.

View project

Show code Edit in sandbox

HTML

        
            

        <!-- Jumbotron -->
        <div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/forest2.webp);">
          <div class="text-white text-center rgba-stylish-strong py-5 px-4">
            <div class="py-5">

              <!-- Content -->
              <h5 class="h5 orange-text"><i class="fas fa-camera-retro"></i> Photography</h5>
              <h2 class="card-title h2 my-4 py-2">Jumbotron with image overlay</h2>
              <p class="mb-4 pb-2 px-md-5 mx-md-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur obcaecati vero aliquid libero doloribus ad, unde tempora maiores, ullam, modi qui quidem minima debitis perferendis vitae cumque et quo impedit.</p>
              <a class="btn peach-gradient"><i class="fas fa-clone left"></i> View project</a>

            </div>
          </div>
        </div>
        <!-- Jumbotron -->

Light background MDB Pro component

Material Design for Bootstrap

Powerful and free Material Design UI KIT

Show code Edit in sandbox

HTML

        
            

        <!-- Jumbotron -->
        <div class="jumbotron text-center blue-grey lighten-5">

          <!-- Title -->
          <h2 class="card-title h2">Material Design for Bootstrap</h2>

          <!-- Subtitle -->
          <p class="indigo-text my-4 font-weight-bold">Powerful and free Material Design UI KIT</p>

          <!-- Grid row -->
          <div class="row d-flex justify-content-center">

            <!-- Grid column -->
            <div class="col-xl-7 pb-2">

              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam.</p>

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

          <hr class="my-4 pb-2">

          <button class="btn blue-gradient btn-rounded">Buy now <i class="far fa-gem ml-1"></i></button>
          <button class="btn btn-indigo btn-rounded">Download <i class="fas fa-download ml-1"></i></button>

        </div>
        <!-- Jumbotron -->

Jumbotron with news post

Sample image for first version of blog listing

Work

This is the news title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.

by Carine Fox, 19/08/2016

Show code Edit in sandbox

HTML

        
            

        <!-- News jumbotron -->
        <div class="jumbotron text-center hoverable p-4">

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-4 offset-md-1 mx-3 my-3">

              <!-- Featured image -->
              <div class="view overlay">
                <img src="https://mdbootstrap.com/img/Photos/Others/laptop-sm.webp" class="img-fluid" alt="Sample image for first version of blog listing">
                <a>
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>

            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-7 text-md-left ml-3 mt-3">

              <!-- Excerpt -->
              <a href="#!" class="green-text">
                <h6 class="h6 pb-1"><i class="fas fa-desktop pr-1"></i> Work</h6>
              </a>

              <h4 class="h4 mb-4">This is title of the news</h4>

              <p class="font-weight-normal">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.</p>
              <p class="font-weight-normal">by <a><strong>Carine Fox</strong></a>, 19/08/2016</p>

              <a class="btn btn-success">Read more</a>

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

        </div>
        <!-- News jumbotron -->

Dark background

Material Design for Bootstrap

Powerful and free Material Design UI KIT

Show code Edit in sandbox

HTML

        
            

        <!-- Jumbotron -->
        <div class="jumbotron text-center mdb-color lighten-2 white-text mx-2 mb-5">

          <!-- Title -->
          <h2 class="card-title h2">Material Design for Bootstrap</h2>

          <!-- Subtitle -->
          <p class="my-4 h6">Powerful and free Material Design UI KIT</p>

          <!-- Grid row -->
          <div class="row d-flex justify-content-center">

            <!-- Grid column -->
            <div class="col-xl-7 pb-2">

              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam.</p>

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

          <hr class="my-4 rgba-white-light">

          <div class="pt-2">
            <button type="button" class="btn btn-outline-white">Buy now <i class="far fa-gem ml-1"></i></button>
            <button type="button" class="btn btn-outline-white">Download <i class="fas fa-download ml-1"></i></button>
          </div>

        </div>
        <!-- Jumbotron -->