Responsive React Hero built with Bootstrap 5. Examples include hero image, hero banner, hero slider, hero section & more.

Check out Bootstrap Hero Documentation for detailed instructions & even more examples.

Hero banner

Hero banner is a full width card located at the beginning of a page.

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>
    </>
  );
}

More Examples

React Bootstrap Hero Image:

React Bootstrap Hero section with navbar:

React Bootstrap Background image with navbar:

How to use?

1. Download MDB React - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

More extended Bootstrap documentation