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 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>
</>
);
}
React Bootstrap Hero section with navbar:
React Bootstrap Background image with navbar:
-
Download MDB React - free UI KIT
-
Choose your favourite customized component and click on the image
-
Copy & paste the code into your MDB project
- React Bootstrap Code
- React Bootstrap Gallery
- React Bootstrap Hamburger Menu
- React Bootstrap Jumbotron
- React Bootstrap Maps
- React Bootstrap Mega Menu
- React Bootstrap Media object
- React Bootstrap Multiselect
- React Bootstrap Masonry
- React Bootstrap Contact form
- React Bootstrap Gradients
- React Bootstrap Pagination
- React Bootstrap Panels
- React Bootstrap Social Media icons & buttons
- React Bootstrap Search
- React Bootstrap Table sort
- React Bootstrap Table responsive
- React Bootstrap Table scroll
- React Bootstrap Table search
- React Bootstrap Textarea
- React Bootstrap Sidebar
- React Bootstrap Profiles
- React Bootstrap Nested Dropdown
- React Bootstrap Address Form
- React Scroll Back to Top button
- React Product Cards
- React Avatar
- React Carousel Slider with Thumbnails
- React Chat
- React Comparison table
- React Comments
- React Drawer
- React FAQ component / section
- React Invoice
- React News feed
- React Offcanvas
- React Order details
- React Page transitions
- React Quotes
- React Payment forms
- React Select with custom Input
- React Square Buttons
- React Testimonial Slider
- React Testimonials / Reviews
- React Survey form
- React Timeline
- React To Do List
- React Padding
- React Modal Size
- React Modal Backdrop
- React CSS Text Animations
- React Video
- React Modal Show, Close, Hide & Toggle
- React Card deck
- React Table filter
- React Slider
- React Logo
- React Popup
- React Weather
- React Hero