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.

Heading

Subheading

Call to action 
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>
  );
}

Hero section with navbar

Since Hero is usually the first element of the page, it may be a good idea to combine your Hero with a navbar.

Heading

Subheading

Call to action 
import React from 'react';
import {
  MDBNavbar,
  MDBNavbarToggler,
  MDBIcon,
  MDBNavbarNav,
  MDBNavbarItem,
  MDBNavbarLink,
  MDBContainer
} from 'mdb-react-ui-kit';

export default function HeroSectionWithNavbar() {
  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.

Heading

Subheading

Call to action 
import React from 'react';
import {
  MDBNavbar,
  MDBNavbarToggler,
  MDBIcon,
  MDBNavbarNav,
  MDBNavbarItem,
  MDBNavbarLink,
  MDBContainer
} from 'mdb-react-ui-kit';

export default function BgImageWithNavbar() {
  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>
  );
}

Fixed navbar

You can stick the navbar to the top of the window by using fixed={true} property. Thanks to this whenever you scroll the page the navbar will be always visible.

Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements. In the examples below, we add margin-top: 58px; (height of the navbar) to the Hero and background image for this purpose.

Heading

Subheading

Call to action

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

import React from "react";
import {
  MDBNavbar,
  MDBNavbarToggler,
  MDBIcon,
  MDBNavbarNav,
  MDBNavbarItem,
  MDBNavbarLink,
  MDBContainer,
} from "mdb-react-ui-kit";

export default function FixedNavbar() {
  return (
    <>
      <header style={{ paddingLeft: 0, paddingTop: '1px' }}>
        <MDBNavbar expand="lg" fixed className="w-100" light bgColor="white" style={{position: 'fixed'}}>
          <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" style={{marginTop: '58px'}}>
          <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>
    </>
  );
}

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.

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