Basic example
Jumbotron provides an excellent way to showcase the key content or information on a web page, calling extra attention to some special content or information.
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.
<!-- Jumbotron -->
<div class="p-6 shadow-lg rounded-lg bg-gray-100 text-gray-700">
<h2 class="font-semibold text-3xl mb-5">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-6 border-gray-300" />
<p>
It uses utility classes for typography and spacing to space content out within the larger
container.
</p>
<button
type="button"
class="inline-block px-6 py-2.5 mt-4 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>
Learn more
</button>
</div>
<!-- Jumbotron -->
Background image
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.
Use .background-image: url('image_address') within the stylesheet.
<!-- Jumbotron -->
<div
class="p-12 text-center relative overflow-hidden bg-no-repeat bg-cover rounded-lg"
style="
background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');
height: 400px;
"
>
<div
class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
style="background-color: rgba(0, 0, 0, 0.6)"
>
<div class="flex justify-center items-center h-full">
<div class="text-white">
<h2 class="font-semibold text-4xl mb-4">Heading</h2>
<h4 class="font-semibold text-xl mb-6">Subheading</h4>
<a
class="inline-block px-7 py-3 mb-1 border-2 border-gray-200 text-gray-200 font-medium text-sm leading-snug uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
href="#!"
role="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Call to action</a
>
</div>
</div>
</div>
</div>
<!-- Jumbotron -->
With navbar
Heading
Subheading
<header>
<!-- Navbar -->
<nav
class="navbar navbar-expand-md shadow-lg py-2 bg-white relative flex items-center w-full justify-between"
>
<div class="px-6">
<button
class="navbar-toggler border-0 py-3 px-2 md:hidden leading-none text-xl bg-transparent text-gray-600 hover:text-gray-700 focus:text-gray-700 transition-shadow duration-150 ease-in-out"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContentX"
aria-controls="navbarSupportedContentX"
aria-expanded="false"
aria-label="Toggle navigation"
>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
class="w-5"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path
fill="currentColor"
d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
></path>
</svg>
</button>
<div class="navbar-collapse collapse grow items-center" id="navbarSupportedContentX">
<ul class="navbar-nav mr-auto flex flex-col md:flex-row">
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Home</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Features</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Pricing</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Jumbotron -->
<div class="p-12 text-center bg-gray-100 text-gray-700">
<h2 class="font-semibold text-4xl mb-4">Heading</h2>
<h4 class="font-semibold text-xl mb-6">Subheading</h4>
<button
type="button"
class="inline-block px-6 py-2.5 mb-1 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>
Call to action
</button>
</div>
<!-- Jumbotron -->
</header>
Background image with navbar
Background image with navbar
<header>
<!-- Navbar -->
<nav
class="navbar navbar-expand-md shadow-lg py-2 bg-gray-50 relative flex items-center w-full justify-between"
>
<div class="px-6">
<button
class="navbar-toggler border-0 py-3 px-2 md:hidden leading-none text-xl bg-transparent text-gray-600 hover:text-gray-700 focus:text-gray-700 transition-shadow duration-150 ease-in-out"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContentY"
aria-controls="navbarSupportedContentY"
aria-expanded="false"
aria-label="Toggle navigation"
>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
class="w-5"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path
fill="currentColor"
d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
></path>
</svg>
</button>
<div class="navbar-collapse collapse grow items-center" id="navbarSupportedContentY">
<ul class="navbar-nav mr-auto flex flex-col md:flex-row">
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Home</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Features</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Pricing</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background image -->
<div
class="p-12 text-center relative overflow-hidden bg-no-repeat bg-cover"
style="
background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');
height: 400px;
"
>
<div
class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
style="background-color: rgba(0, 0, 0, 0.6)"
>
<div class="flex justify-center items-center h-full">
<div class="text-white">
<h2 class="font-semibold text-4xl mb-4">Heading</h2>
<h4 class="font-semibold text-xl mb-6">Subheading</h4>
<a
class="inline-block px-7 py-3 mb-1 border-2 border-gray-200 text-gray-200 font-medium text-sm leading-snug uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
href="#!"
role="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Call to action</a
>
</div>
</div>
</div>
</div>
<!-- Background image -->
</header>
Full page option
To get full page jumbotron, you have to add the .w-full class and a .container or .container-fluid inside it.
The background photo shows Lido di Ostia
It is a coastal town in Italy that is part of Rome
Learn more about Rome
<header>
<!-- Navbar -->
<nav
class="navbar navbar-expand-md shadow-lg py-2 bg-gray-50 relative flex items-center w-full justify-between"
>
<div class="px-6">
<button
class="navbar-toggler border-0 py-3 px-2 md:hidden leading-none text-xl bg-transparent text-gray-600 hover:text-gray-700 focus:text-gray-700 transition-shadow duration-150 ease-in-out"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContentO"
aria-controls="navbarSupportedContentO"
aria-expanded="false"
aria-label="Toggle navigation"
>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
class="w-5"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path
fill="currentColor"
d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
></path>
</svg>
</button>
<div class="navbar-collapse collapse grow items-center" id="navbarSupportedContentO">
<ul class="navbar-nav mr-auto flex flex-col md:flex-row">
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Home</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Features</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Pricing</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background image -->
<div
class="p-12 text-center relative overflow-hidden bg-no-repeat bg-cover h-96 lg:h-screen"
style="background-image: url('https://mdbootstrap.com/img/Photos/Inne/ostia.jpg')"
>
<div
class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
style="background-color: rgba(2, 56, 53, 0.7)"
>
<div class="flex justify-center items-center h-full">
<div class="text-white">
<h2 class="font-semibold text-4xl mb-4">
The background photo shows Lido di Ostia
</h2>
<h4 class="font-semibold text-xl mb-6">
It is a coastal town in Italy that is part of Rome
</h4>
<a
class="inline-block px-7 py-3 mb-1 border-2 border-gray-200 text-gray-200 font-medium text-sm leading-snug uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
href="#!"
role="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Learn more about Rome</a
>
</div>
</div>
</div>
</div>
<!-- Background image -->
</header>
Fixed navbar
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
Heading
Subheading
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
<header>
<!-- Navbar -->
<nav
class="navbar navbar-expand-md shadow-lg py-2 bg-white flex items-center w-full justify-between fixed top-0 right-0 left-0"
>
<div class="px-6">
<button
class="navbar-toggler border-0 py-3 px-2 md:hidden leading-none text-xl bg-transparent text-gray-600 hover:text-gray-700 focus:text-gray-700 transition-shadow duration-150 ease-in-out"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContentL"
aria-controls="navbarSupportedContentL"
aria-expanded="false"
aria-label="Toggle navigation"
>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
class="w-5"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path
fill="currentColor"
d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
></path>
</svg>
</button>
<div class="navbar-collapse collapse grow items-center" id="navbarSupportedContentL">
<ul class="navbar-nav mr-auto flex flex-col md:flex-row">
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Home</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Features</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Pricing</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Jumbotron -->
<div class="p-12 text-center bg-gray-100 text-gray-700">
<h2 class="font-semibold text-4xl mb-4">Heading</h2>
<h4 class="font-semibold text-xl mb-6">Subheading</h4>
<button
type="button"
class="inline-block px-6 py-2.5 mb-1 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>
Call to action
</button>
</div>
<!-- Jumbotron -->
</header>
Fixed navbar with background image
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
<header>
<!-- Navbar -->
<nav
class="navbar navbar-expand-md shadow-lg py-2 bg-white flex items-center w-full justify-between fixed top-0 right-0 left-0"
>
<div class="px-6">
<button
class="navbar-toggler border-0 py-3 px-2 md:hidden leading-none text-xl bg-transparent text-gray-600 hover:text-gray-700 focus:text-gray-700 transition-shadow duration-150 ease-in-out"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContentM"
aria-controls="navbarSupportedContentM"
aria-expanded="false"
aria-label="Toggle navigation"
>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
class="w-5"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path
fill="currentColor"
d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
></path>
</svg>
</button>
<div class="navbar-collapse collapse grow items-center" id="navbarSupportedContentM">
<ul class="navbar-nav mr-auto flex flex-col md:flex-row">
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Home</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Features</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Pricing</a
>
</li>
<li class="nav-item">
<a
class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
href="#!"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background image -->
<div
class="p-12 text-center relative overflow-hidden bg-no-repeat bg-cover"
style="
background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');
height: 400px;
"
>
<div
class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
style="background-color: rgba(0, 0, 0, 0.6)"
>
<div class="flex justify-center items-center h-full">
<div class="text-white">
<h2 class="font-semibold text-4xl mb-4">Heading</h2>
<h4 class="font-semibold text-xl mb-6">Subheading</h4>
<a
class="inline-block px-7 py-3 mb-1 border-2 border-gray-200 text-gray-200 font-medium text-sm leading-snug uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
href="#!"
role="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>Call to action</a
>
</div>
</div>
</div>
</div>
<!-- Background image -->
</header>