MDB React 5

Responsive React Product Cards built with the latest Bootstrap 5. Card grid usage, eCommerce product cards, product card listing deck, card with reviews and more.

Check out React Product Cards Documentation for detailed instructions & even more examples.

Basic example

import React from "react";
import {
  MDBContainer,
  MDBRow,
  MDBCol,
  MDBCard,
  MDBCardBody,
  MDBCardImage,
  MDBCardTitle,
  MDBIcon,
} from "mdb-react-ui-kit";

function App() {
  return (
    <MDBContainer fluid className="my-5">
      <MDBRow className="justify-content-center">
        <MDBCol md="6">
          <MDBCard className="text-black">
            <MDBIcon fab icon="apple" size="lg" className="px-3 pt-3 pb-2" />
            <MDBCardImage
              src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/3.webp"
              position="top"
              alt="Apple Computer"
            />
            <MDBCardBody>
              <div className="text-center">
                <MDBCardTitle>Believing is seeing</MDBCardTitle>
                <p className="text-muted mb-4">Apple pro display XDR</p>
              </div>
              <div>
                <div className="d-flex justify-content-between">
                  <span>Pro Display XDR</span>
                  <span>$5,999</span>
                </div>
                <div className="d-flex justify-content-between">
                  <span>Pro stand</span>
                  <span>$999</span>
                </div>
                <div className="d-flex justify-content-between">
                  <span>Vesa Mount Adapter</span>
                  <span>$199</span>
                </div>
              </div>
              <div className="d-flex justify-content-between total font-weight-bold mt-4">
                <span>Total</span>
                <span>$7,197.00</span>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
}

export default App;

body {
  background-color: #eee;
}

How to use?

1. Download MDB 5 - free REACT 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 examples

Product comparison template:

Ecommerce category product list page:

Ecommerce product listing:

You can find other examples here.

---

More extended React documentation

• 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