Jumbotron
Bootstrap Jumbotron - free examples, templates & tutorial
Responsive Jumbotron built with Bootstrap 5. Classic hero component, jumbotron with background image, with navbar, full height, slider & more combinations.
To learn more read
Card Docs
Basic example
Jumbotron is a full width
card that is usually displayed at the top of
the page, sometimes also referred to as a "Hero component". Jumbotron with
rounded corners ,
vertically centered
content, and a call to action
button
is the most common component found on
landing pages .
The
jumbotron color should be only slightly
off the background of the page to make your design feel "light".
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="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" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">
Learn more
</button>
</div>
<!-- Jumbotron -->
Background image
You can add a
background image
to your jumbotron. In that case, you should also use a
mask to make sure, that the text over image is clearly visible.
You can include many different images and contents as "slides" by creating a
jumbotron slider
or a
carousel slider with
thumbnails , if you want use smaller image previews as controls.
<!-- 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 data-mdb-ripple-init class="btn btn-outline-light btn-lg" href="#!" role="button">Call to action</a>
</div>
</div>
</div>
</div>
<!-- Jumbotron -->
With navbar
Since jumbotron is usually the first element of the page, it may be a good idea to combine your jumbotron with a
navbar .
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">
<div class="container-fluid">
<button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init
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-body-tertiary">
<h1 class="mb-3">Heading</h1>
<h4 class="mb-3">Subheading</h4>
<a data-mdb-ripple-init 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.
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">
<div class="container-fluid">
<button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init
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 data-mdb-ripple-init 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.
<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-body-tertiary">
<div class="container-fluid">
<button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init
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 data-mdb-ripple-init 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 data-mdb-ripple-init 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
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary fixed-top">
<div class="container-fluid">
<button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init
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-body-tertiary" style="margin-top: 58px;">
<h1 class="mb-3">Heading</h1>
<h4 class="mb-3">Subheading</h4>
<a data-mdb-ripple-init class="btn btn-primary" href="" role="button">Call to action</a>
</div>
<!-- Jumbotron -->
</header>
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary fixed-top">
<div class="container-fluid">
<button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init
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 data-mdb-ripple-init 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.
<!--Main Navigation-->
<header>
<!-- Animated navbar-->
<nav class="navbar navbar-expand-lg fixed-top navbar-scroll">
<div class="container-fluid">
<button data-mdb-button-init class="navbar-toggler ps-0" type="button" data-mdb-collapse-init
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.
/* Color of the links BEFORE scroll */
.navbar-scroll .nav-link,
.navbar-scroll .navbar-toggler-icon {
color: #fff;
}
/* Color of the links AFTER scroll */
.navbar-scrolled .nav-link,
.navbar-scrolled .navbar-toggler-icon {
color: #4f4f4f;
}
/* Color of the navbar AFTER scroll */
.navbar-scrolled {
background-color: #fff;
}
/* An optional height of the navbar AFTER scroll */
.navbar.navbar-scroll.navbar-scrolled {
padding-top: 5px;
padding-bottom: 5px;
}
