Headers
Bootstrap 5 Header component
Headers are compositions that extend standard navbar functionalities. They contain additional components like a jumbotron, sub-navbar, or image covers which serve as a containers for extra navigation elements - usually links, forms, or call-to-action buttons.
Jumbotron
A jumbotron is a lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
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-light">
<h1 class="mb-3">Heading</h1>
<h4 class="mb-3">Subheading</h4>
<a class="btn btn-primary" href="" role="button">Call to action</a>
</div>
<!-- Jumbotron -->
</header>
Background image
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-white">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
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 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.
Learn Bootstrap 5 with MDB
Best & free guide of responsive web design
Start tutorial Download MDB UI KIT
<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-white">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
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
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
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>