Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Bootstrap Jumbotron

Bootstrap Jumbotron is an extremely useful component that comes in handy when you need to call extra attention to a specific piece of information.

Inside a Jumbotron, you can make use of almost any other Bootstrap code to additionally 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.

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
                
<div class="row">
    <div class="col-md-12">
        <div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Othres/gradient1.jpg);">
            <div class="text-white text-center d-flex align-items-center py-5 px-4 my-5">
                <div>
                    <h1 class="card-title pt-3 mb-5 font-bold"><strong>Create your beautiful website with MDBootstrap</strong></h1>
                    <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-rounded"><i class="fa fa-clone left"></i> View project</a>
                </div>
            </div>
        </div>
    </div>
</div>
                
            

Jumbotron basic v.1

Fluid jumbotron

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

                
<!--Jumbotron-->
<div class="jumbotron jumbotron-fluid">

    <div class="container">
        <h1 class="h1-reponsive mb-4 mt-2 blue-text font-bold">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
    </div>

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

Jumbotron basic v.2

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

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

    <h1 class="h1-reponsive mb-3 blue-text"><strong>Hello, world!</strong></h1>
    <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>
    <p class="lead">
        <a class="btn aqua-gradient btn-lg" href="#" role="button">Learn more</a>
    </p>

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

Jumbotron with image

My adventure

Photography

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

                

<div class="jumbotron text-center">

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

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

    <h5 class="indigo-text font-bold 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="icons-sm li-ic"><i class="fa fa-linkedin grey-text"> </i></a>
    <!--Twitter-->
    <a class="icons-sm tw-ic"><i class="fa fa-twitter grey-text"> </i></a>
    <!--Dribbble-->
    <a class="icons-sm fb-ic"><i class="fa fa-facebook 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 content.

Button
                
<!--Card-->
<div class="card">

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

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

</div>
<!--/.Card-->
                
            

Jumbotron with buttons

Material Design for Bootstrap

Powerful and free Material Design UI KIT

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


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

    <!--Title-->
    <h1 class="card-title h2-responsive mt-2"><strong>Material Design for Bootstrap</strong></h1>
    <!--Subtitle-->
    <p class="blue-text mb-4 font-bold">Powerful and free Material Design UI KIT</p>

    <!--Text-->
    <div class="d-flex justify-content-center">
        <p class="card-text mb-3" style="max-width: 43rem;">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium,
            totam rem aperiam. Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium
            doloremque laudantium, totam rem aperiam.
        </p>
    </div>

    <hr class="my-4">

    <button type="button" class="btn btn-blue waves-effect">Buy now <span class="fa fa-diamond ml-1"></span></button>
    <button type="button" class="btn btn-outline-primary waves-effect">Download <i class="fa fa-download ml-1"></i></button>

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

Jumbotron with image overlay

Photography

Jumbotron with image overlay

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
                
<div class="row mb-5">
    <div class="col-md-12">
        <div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/forest2.jpg);">
            <div class="text-white text-center d-flex align-items-center rgba-stylish-strong py-5 px-4">
                <div class="py-5">
                    <!--Content-->
                        <h6 class="orange-text font-bold"><i class="fa fa-camera-retro"></i> Photography</h6>
                        <h2 class="card-title pt-3 mb-5 font-bold">Jumbotron with image overlay</h2>
                        <p class="px-5 pb-4">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 peach-gradient"><i class="fa fa-clone left"></i> View project</a>
                    <!--Content-->
                </div>
            </div>
        </div>
    </div>
</div>
                
            

Light background

Material Design for Bootstrap

Powerful and free Material Design UI KIT

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


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

<!--Title-->
<h1 class="card-title h2-responsive font-bold mt-3"><strong>Material Design for Bootstrap</strong></h1>
<!--Subtitle-->
<p class="pt-2 font-bold indigo-text"><strong>Powerful and free Material Design UI KIT</strong></p>

<!--Text-->
<div class="d-flex justify-content-center">
    <p class="card-text my-3" style="max-width: 43rem;">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium,
        totam rem aperiam. Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium
        doloremque laudantium, totam rem aperiam.
    </p>
</div>

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

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

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

Jumbotron with news post

Work

This is title of the news

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

Read more
                
<!--News card-->
<div class="card border-primary mb-3 text-center hoverable">
    <div class="card-body">
        <!--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 hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/Others/laptop-sm.jpg" class="img-fluid" alt="Sample image for first version of blog listing">
                    <a>
                        <div class="mask"></div>
                    </a>
                </div>
            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-7 text-left ml-3 mt-3">
                <!--Excerpt-->
                <a href="" class="green-text">
                    <h6 class="font-bold pb-1"><i class="fa fa-desktop"></i> Work</h6>
                </a>
                <h4 class="mb-4"><strong>This is title of the news</strong></h4>
                <p>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>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>
</div>
<!--News card-->
                
            

Dark background

Material Design for Bootstrap

Powerful and free Material Design UI KIT

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


                
<!--Jumbotron-->
<div class="jumbotron text-center mdb-color lighten-2 white-text z-depth-2">

    <!--Title-->
    <h1 class="card-title h2-responsive mt-2 font-bold"><strong>Material Design for Bootstrap</strong></h1>
    <!--Subtitle-->
    <p class="mt-4"><strong>Powerful and free Material Design UI KIT</strong></p>

    <!--Text-->
    <div class="d-flex justify-content-center">
        <p class="card-text my-2" style="max-width: 43rem;">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium,
            totam rem aperiam. Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium
            doloremque laudantium, totam rem aperiam.
        </p>
    </div>

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

    <button type="button" class="btn btn-outline-white">Buy now <i class="fa fa-diamond ml-1"></i></button>
    <button type="button" class="btn btn-outline-white">Download <i class="fa fa-download ml-1"></i></button>

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