Jumbotron
React Bootstrap Jumbotron - free examples, templates & tutorial
Responsive React 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.
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.
import React from 'react';
import {
MDBNavbar,
MDBNavbarToggler,
MDBIcon,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBContainer
} from 'mdb-react-ui-kit';
export default function App() {
return (
<header style={{ paddingLeft: 0 }}>
<MDBNavbar expand='lg' light bgColor='white'>
<MDBContainer fluid>
<MDBNavbarToggler
aria-controls='navbarExample01'
aria-expanded='false'
aria-label='Toggle navigation'
>
<MDBIcon fas icon='bars' />
</MDBNavbarToggler>
<div className='collapse navbar-collapse' id='navbarExample01'>
<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>
</div>
</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 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.
import React from 'react';
import {
MDBNavbar,
MDBNavbarToggler,
MDBIcon,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBContainer
} from 'mdb-react-ui-kit';
export default function App() {
return (
<header style={{ paddingLeft: 0 }}>
<MDBNavbar expand='lg' light bgColor='white'>
<MDBContainer fluid>
<MDBNavbarToggler
aria-controls='navbarExample01'
aria-expanded='false'
aria-label='Toggle navigation'
>
<MDBIcon fas icon='bars' />
</MDBNavbarToggler>
<div className='collapse navbar-collapse' id='navbarExample01'>
<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>
</div>
</MDBContainer>
</MDBNavbar>
<div
className='p-5 text-center bg-image'
style={{ backgroundImage: "url('https://mdbootstrap.com/img/new/slides/041.webp')", height: 400 }}
>
<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>
<a className='btn btn-outline-light btn-lg' href='#!' role='button'>
Call to action
</a>
</div>
</div>
</div>
</div>
</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.
import React from 'react';
import {
MDBAnimatedNavbar,
MDBContainer,
MDBNavbarToggler,
MDBIcon,
MDBNavbarNav,
MDBNavbarLink,
MDBNavbarItem,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<header>
<MDBAnimatedNavbar expand='lg' fixed='top'>
<MDBContainer fluid>
<MDBNavbarToggler aria-controls='navbarExample01' aria-expanded='false' aria-label='Toggle navigation'>
<MDBIcon fas icon='bars' />
</MDBNavbarToggler>
<div className='collapse navbar-collapse' id='navbarExample01'>
<MDBNavbarNav fullWidth={false} className='me-auto mb-2 mb-lg-0'>
<MDBNavbarItem active>
<MDBNavbarLink href='#'>Home</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink
href='https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA'
rel='nofollow'
target='_blank'
>
Learn Bootstrap 5
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='https://mdbootstrap.com/docs/standard/' target='_blank'>
Download MDB UI KIT
</MDBNavbarLink>
</MDBNavbarItem>
</MDBNavbarNav>
<MDBNavbarNav fullWidth={false} className='flex-row'>
<MDBNavbarItem>
<MDBNavbarLink
className='pe-2'
href='https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA'
rel='nofollow'
target='_blank'
>
<MDBIcon fab icon='youtube' />
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink
className='nav-link px-2'
href='https://www.facebook.com/mdbootstrap'
rel='nofollow'
target='_blank'
>
<MDBIcon fab icon='facebook-f' />
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink
className='nav-link px-2'
href='https://twitter.com/MDBootstrap'
rel='nofollow'
target='_blank'
>
<MDBIcon fab icon='twitter' />
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink
className='nav-link ps-2'
href='https://github.com/mdbootstrap/mdb-ui-kit'
rel='nofollow'
target='_blank'
>
<MDBIcon fab icon='github' />
</MDBNavbarLink>
</MDBNavbarItem>
</MDBNavbarNav>
</div>
</MDBContainer>
</MDBAnimatedNavbar>
<div
id='intro'
className='bg-image'
style={{
backgroundImage: 'url(https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp)',
height: '100vh',
}}
>
<div className='mask text-white' style={{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }}>
<div className='container d-flex align-items-center text-center h-100'>
<div>
<h1 className='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>
</header>
<div className='container my-5'>
<p>
{' '}
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis quam minima perspiciatis eos tenetur.
Praesentium dolores at quos aperiam sed, sint provident consectetur incidunt, nostrum porro earum commodi, ex
architecto.
</p>
</div>
</>
);
}