Hero
React Bootstrap Hero - free examples, templates & tutorial
Responsive React Hero built with Bootstrap 5. Examples include hero image, hero banner, hero slider, hero section & more.
To learn more read Card Docs.
Hero banner
Hero banner is a full width card located at the beginning of a page.
Hello world!
This is a simple hero unit, a simple hero-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.
import React from "react";
import { MDBBtn, MDBContainer, MDBTypography } from "mdb-react-ui-kit";
export default function Basic() {
return (
<>
<MDBContainer className="mt-5">
<div
className="p-4 shadow-4 rounded-3"
style={{ backgroundColor: "hsl(0, 0%, 94%)" }}
>
<MDBTypography tag="h2">Hello world!</MDBTypography>
<p>
This is a simple hero unit, a simple Hero-style component for
calling extra attention to featured content or information.
</p>
<hr className="my-4" />
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
<MDBBtn>Learn more</MDBBtn>
</div>
</MDBContainer>
</>
);
}
Hero image
Add a background image to your Hero. Make sure to use a mask ensure contrast between the overlaying text & the image.
You can include many different slides by creating a Hero slider or a Hero slider with thumbnails, if you want use smaller image previews as controls.
import React from 'react';
export default function HeroImage() {
return (
<header style={{ paddingLeft: 0 }}>
<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>
);
}