Responsive Jumbotron built with Bootstrap 5. Classic hero component, jumbotron with background image, with navbar, full height, slider & more combinations.
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.
<!-- Jumbotron --><divclass="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><hrclass="my-4"/><p>
It uses utility classes for typography and spacing to space content out within the
larger container.
</p><buttontype="button"data-mdb-button-initdata-mdb-ripple-initclass="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.
<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 --><navclass="navbar navbar-expand-lg navbar-light bg-body-tertiary"><divclass="container-fluid"><buttondata-mdb-button-initclass="navbar-toggler"type="button"data-mdb-collapse-initdata-mdb-target="#navbarExample01"aria-controls="navbarExample01"aria-expanded="false"aria-label="Toggle navigation"><iclass="fas fa-bars"></i></button><divclass="collapse navbar-collapse"id="navbarExample01"><ulclass="navbar-nav me-auto mb-2 mb-lg-0"><liclass="nav-item active"><aclass="nav-link"aria-current="page"href="#">Home</a></li><liclass="nav-item"><aclass="nav-link"href="#">Features</a></li><liclass="nav-item"><aclass="nav-link"href="#">Pricing</a></li><liclass="nav-item"><aclass="nav-link"href="#">About</a></li></ul></div></div></nav><!-- Navbar --><!-- Background image --><divid="intro-example"class="p-5 text-center bg-image"style="background-image:url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');"><divclass="mask"style="background-color:rgba(0, 0, 0, 0.7);"><divclass="d-flex justify-content-center align-items-center h-100"><divclass="text-white"><h1class="mb-3">Learn Bootstrap 5 with MDB</h1><h5class="mb-4">
Best & free guide of responsive web design
</h5><adata-mdb-ripple-initclass="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><adata-mdb-ripple-initclass="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.
/* 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;}
