Headers
React Bootstrap 5 Headers 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.
import React, { useState } from 'react';
import {
MDBNavbar,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBNavbarToggler,
MDBContainer,
MDBIcon,
MDBCollapse
} from 'mdb-react-ui-kit';
export default function App() {
const [showBasic, setShowBasic] = useState(false);
return (
<header>
<MDBNavbar expand='lg' light bgColor='white'>
<MDBContainer fluid>
<MDBNavbarToggler
onClick={() => setShowBasic(!showBasic)}
aria-controls='navbarExample01'
aria-expanded='false'
aria-label='Toggle navigation'
>
<MDBIcon fas icon='bars' />
</MDBNavbarToggler>
<MDBCollapse show={showBasic}>
<MDBNavbarNav right className='mb-2 mb-lg-0'>
<MDBNavbarItem active>
<MDBNavbarLink aria-current='page' href='#'>
Home
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>Features</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>Pricing</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>About</MDBNavbarLink>
</MDBNavbarItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
<div className='p-5 text-center bg-light'>
<h1 className='mb-3'>Heading</h1>
<h4 className='mb-3'>Subheading</h4>
<a className='btn btn-primary' href='' role='button'>
Call to action
</a>
</div>
</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.
import React, { useState } from 'react';
import {
MDBNavbar,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBNavbarToggler,
MDBContainer,
MDBIcon,
MDBCollapse,
MDBBtn
} from 'mdb-react-ui-kit';
export default function App() {
const [showBasic, setShowBasic] = useState(false);
return (
<header>
<MDBNavbar expand='lg' light bgColor='white'>
<MDBContainer fluid>
<MDBNavbarToggler
onClick={() => setShowBasic(!showBasic)}
aria-controls='navbarExample01'
aria-expanded='false'
aria-label='Toggle navigation'
>
<MDBIcon fas icon='bars' />
</MDBNavbarToggler>
<MDBCollapse navbar show={showBasic}>
<MDBNavbarNav right className='mb-2 mb-lg-0'>
<MDBNavbarItem active>
<MDBNavbarLink aria-current='page' href='#'>
Home
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>Features</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>Pricing</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>About</MDBNavbarLink>
</MDBNavbarItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
<div
className='p-5 text-center bg-image'
style={{ backgroundImage: "url('https://mdbootstrap.com/img/new/slides/041.webp')", height: '400px' }}
>
<div className='mask' style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}>
<div className='d-flex justify-content-center align-items-center h-100'>
<div className='text-white'>
<h1 className='mb-3'>Heading</h1>
<h4 className='mb-3'>Subheading</h4>
<MDBBtn tag="a" outline size="lg">
Call to action
</MDBBtn>
</div>
</div>
</div>
</div>
</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
import React, { useState } from 'react';
import {
MDBNavbar,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarToggler,
MDBNavbarLink,
MDBContainer,
MDBIcon,
MDBCollapse,
MDBBtn
} from 'mdb-react-ui-kit';
export default function App() {
const [showBasic, setShowBasic] = useState(false);
return (
<header>
<MDBNavbar expand='lg' light bgColor='white'>
<MDBContainer fluid>
<MDBNavbarToggler
aria-controls='navbarExample01'
aria-expanded='false'
aria-label='Toggle navigation'
>
<MDBIcon fas icon='bars' />
</MDBNavbarToggler>
<MDBCollapse show={showBasic}>
<MDBNavbarNav right className='mb-2 mb-lg-0'>
<MDBNavbarItem active>
<MDBNavbarLink aria-current='page' href='#'>
Home
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>Features</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>Pricing</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>About</MDBNavbarLink>
</MDBNavbarItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
<div
id='intro-example'
className='p-5 text-center bg-image'
style={{ backgroundImage: "url('https://mdbootstrap.com/img/new/slides/041.webp')" }}
>
<div className='mask' style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }}>
<div className='d-flex justify-content-center align-items-center h-100'>
<div className='text-white'>
<h1 className='mb-3'>Learn Bootstrap 5 with MDB</h1>
<h5 className='mb-4'>Best & free guide of responsive web design</h5>
<MDBBtn
className="m-2"
tag="a"
outline
size="lg"
rel="nofollow"
target="_blank"
href='https://www.youtube.com/watch?v=c9B4TPnak1A'
>
Start tutorial
</MDBBtn>
<MDBBtn
className="m-2"
tag="a"
outline
size="lg"
target="_blank"
href='https://mdbootstrap.com/docs/standard/'
>
Download MDB UI KIT
</MDBBtn>
</div>
</div>
</div>
</div>
</header>
);
}
/* Default height for small devices */
#intro-example {
height: 400px;
}
/* Height for devices larger than 992px */
@media (min-width: 992px) {
#intro-example {
height: 600px;
}
}