Comparison table
React Bootstrap 5 Comparison table
Responsive React Comparison table templates built with Bootstrap 5. Various examples like comparison table on pricing page, comparison card, product comparison & more.
If you want to create your own examples or learn more check out the Tables documentation.
Basic example
Product features comparison is usually best visualized as a table.
| PRO | Basic | |
|---|---|---|
| Domain customization | ||
| FTP | ||
| Database | ||
| Support | ||
| Backups |
import React from "react";
import {
MDBContainer,
MDBIcon,
MDBTable,
MDBTableBody,
MDBTableHead,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBTable
responsive
striped
className=" text-successtable-border border-light"
>
<MDBTableHead className="border-light">
<tr>
<th scope="col"></th>
<th scope="col">
<strong>PRO</strong>
</th>
<th scope="col">
<strong>Basic</strong>
</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope="row">Domain customization </th>
<td>
<MDBIcon fas icon="check" className="text-success" />
</td>
<td>
<MDBIcon fas icon="times" className="text-danger" />
</td>
</tr>
<tr>
<th scope="row">FTP</th>
<td>
<MDBIcon fas icon="check" className="text-success" />
</td>
<td>
<MDBIcon fas icon="check" className="text-success" />
</td>
</tr>
<tr>
<th scope="row">Database</th>
<td>
<MDBIcon fas icon="check" className="text-success" />
</td>
<td>
<MDBIcon fas icon="times" className="text-danger" />
</td>
</tr>
<tr>
<th scope="row">Support</th>
<td>
<MDBIcon fas icon="check" className="text-success" />
</td>
<td>
<MDBIcon fas icon="check" className="text-success" />
</td>
</tr>
<tr>
<th scope="row">Backups</th>
<td>
<MDBIcon fas icon="check" className="text-success" />
</td>
<td>
<MDBIcon fas icon="times" className="text-danger" />
</td>
</tr>
</MDBTableBody>
</MDBTable>
</MDBContainer>
);
}
Comparison on pricing
Pricing tiers comparison is usually created by embedding a list group inside of a card, and displaying the pricing cards next to each other with the help of a CSS grid.
Pricing
Free
Free
- Feature
- Feature
- Feature
Essential
$19/month
- Feature
- Feature
- Feature
- Feature
Advanced
$49/month
- Feature
- Feature
- Feature
- Feature
- Feature
Enterprise
$189/month
- Feature
- Feature
- Feature
- Feature
- Feature
- Feature
import React from "react";
import {
MDBContainer,
MDBBtnGroup,
MDBBtn,
MDBRow,
MDBCol,
MDBCard,
MDBCardHeader,
MDBCardBody,
MDBListGroup,
MDBListGroupItem,
MDBCardFooter,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5 text-center">
<h4 className="mb-4">
<strong>Pricing</strong>
</h4>
<MDBBtnGroup className="mb-4" aria-label="Basic example">
<MDBBtn href="#" color="primary" active>
Monthly billing
</MDBBtn>
<MDBBtn color="primary">
Annual billign <small>(2 months FREE)</small>
</MDBBtn>
</MDBBtnGroup>
<MDBRow className="gx-lg-5">
<MDBCol lg="3" md="6" className="mb-4">
<MDBCard>
<MDBCardHeader className="bg-white py-3">
<p className="text-uppercase small mb-2">
<strong>Free</strong>
</p>
<h5 className="mb-0">Free</h5>
</MDBCardHeader>
<MDBCardBody>
<MDBListGroup flush>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
</MDBListGroup>
</MDBCardBody>
<MDBCardFooter className="bg-white py-3">
<MDBBtn color="success" size="sm">
Get it
</MDBBtn>
</MDBCardFooter>
</MDBCard>
</MDBCol>
<MDBCol lg="3" md="6" className="mb-4">
<MDBCard border="primary">
<MDBCardHeader className="bg-white py-3">
<p className="text-uppercase small mb-2">
<strong>ESSENTIAL</strong>
</p>
<h5 className="mb-0">$19/month</h5>
</MDBCardHeader>
<MDBCardBody>
<MDBListGroup flush>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
</MDBListGroup>
</MDBCardBody>
<MDBCardFooter className="bg-white py-3">
<MDBBtn color="primary" size="sm">
Buy now
</MDBBtn>
</MDBCardFooter>
</MDBCard>
</MDBCol>
<MDBCol lg="3" md="6" className="mb-4">
<MDBCard>
<MDBCardHeader className="bg-white py-3">
<p className="text-uppercase small mb-2">
<strong>ADVANCED</strong>
</p>
<h5 className="mb-0">$49/month</h5>
</MDBCardHeader>
<MDBCardBody>
<MDBListGroup flush>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
</MDBListGroup>
</MDBCardBody>
<MDBCardFooter className="bg-white py-3">
<MDBBtn color="info" size="sm">
Buy now
</MDBBtn>
</MDBCardFooter>
</MDBCard>
</MDBCol>
<MDBCol lg="3" md="6" className="mb-4">
<MDBCard>
<MDBCardHeader className="bg-white py-3">
<p className="text-uppercase small mb-2">
<strong>ENTERPRISE</strong>
</p>
<h5 className="mb-0">$189/month</h5>
</MDBCardHeader>
<MDBCardBody>
<MDBListGroup flush>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
<MDBListGroupItem>Feature</MDBListGroupItem>
</MDBListGroup>
</MDBCardBody>
<MDBCardFooter className="bg-white py-3">
<MDBBtn color="info" size="sm">
Buy now
</MDBBtn>
</MDBCardFooter>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
Extended comparison table
If your comparison table has many rows, we recommend to use a striped table to make it easier to scan.
| Basic | Standard | Premium | Managed | |
|---|---|---|---|---|
| HDD Storage | 700 MB | 1,5 GB | 50 GB | up to 5T |
| Web Server | ||||
| Database | - | Optional | ||
| DNS | - | - | ||
| Backups | - | - | ||
| Tech Support | None | 35$/incident | 15$/incident | 24/7 included |
| Free | $99/mo | $179/mo | Contact us | |
import React from "react";
import {
MDBBtn,
MDBContainer,
MDBIcon,
MDBTable,
MDBTableBody,
MDBTableHead,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5 text-center">
<MDBTable
responsive
striped
className="text-successtable-border border-light"
>
<MDBTableHead className="border-light">
<tr>
<th scope="col"></th>
<th scope="col">
<strong>Basic</strong>
</th>
<th scope="col">
<strong>Standard</strong>
</th>
<th scope="col">
<strong>Premium</strong>
</th>
<th scope="col">
<strong>Managed</strong>
</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope="row">HDD Storage</th>
<td>700 MB</td>
<td>1,5 GB</td>
<td>50 GB</td>
<td>up to 5T</td>
</tr>
<tr>
<th scope="row">Web Server</th>
<td>
<MDBIcon fas icon="check" />
</td>
<td>
<MDBIcon fas icon="check" />
</td>
<td>
<MDBIcon fas icon="check" />
</td>
<td>
<MDBIcon fas icon="check" />
</td>
</tr>
<tr>
<th scope="row">Database</th>
<td>-</td>
<td>Optional</td>
<td>
<MDBIcon fas icon="check" />
</td>
<td>
<MDBIcon fas icon="check" />
</td>
</tr>
<tr>
<th scope="row">DNS</th>
<td>-</td>
<td>-</td>
<td>
<MDBIcon fas icon="check" />
</td>
<td>
<MDBIcon fas icon="check" />
</td>
</tr>
<tr>
<th scope="row">Backups</th>
<td>-</td>
<td>-</td>
<td>
<MDBIcon fas icon="check" />
</td>
<td>
<MDBIcon fas icon="check" />
</td>
</tr>
<tr>
<th scope="row">Tech Support</th>
<td>None</td>
<td>35$/incident</td>
<td>15$/incident</td>
<td>24/7 included</td>
</tr>
<tr>
<td></td>
<td className="fw-bold">Free</td>
<td className="fw-bold">$99/mo</td>
<td className="fw-bold">$179/mo</td>
<td className="fw-bold">
<a href="#">Contact us</a>
</td>
</tr>
<tr>
<th></th>
<th>
<MDBBtn>Sign-up</MDBBtn>
</th>
<th>
<MDBBtn>Buy Now</MDBBtn>
</th>
<th>
<MDBBtn>Buy Now</MDBBtn>
</th>
</tr>
</MDBTableBody>
</MDBTable>
</MDBContainer>
);
}
Advanced Comparison table on pricing
Experiment with different pricing layouts, borders, and typography to create a customized comparison. In the example below we used a simple list with icons for the detailed features included in pricing tiers, and brought the buying button above the list to highlight the differences in tier prices above all.
Pricing
import React from "react";
import {
MDBContainer,
MDBBtnGroup,
MDBBtn,
MDBRow,
MDBCol,
MDBCard,
MDBCardBody,
MDBCardFooter,
MDBTypography,
MDBIcon,
MDBCardTitle,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5 ">
<div className="text-center">
<h4 classaName="mb-4">
<strong>Pricing</strong>
</h4>
<MDBBtnGroup className="mb-4" aria-label="Basic example">
<MDBBtn href="#" color="dark" active>
Monthly billing
</MDBBtn>
<MDBBtn color="light">
Annual billign <small>(2 months FREE)</small>
</MDBBtn>
</MDBBtnGroup>
</div>
<MDBRow>
<MDBCol md="3">
<MDBCard>
<MDBCardBody className="mx-2">
<MDBCardTitle className="my-2">Hobby</MDBCardTitle>
<p className="text-muted">
All the essentials for starting a business
</p>
<p className="h2 fw-bold">
$12
<small className="text-muted" style={{ fontSize: "18px" }}>
/mo
</small>
</p>
<MDBBtn
href="#"
color="dark"
className="d-block mb-2 mt-3 text-capitalize"
>
Buy Hobby
</MDBBtn>
</MDBCardBody>
<MDBCardFooter>
<p
className="text-uppercase fw-bold"
style={{ fontSize: "12px" }}
>
What's included
</p>
<MDBTypography listUnStyled className="mb-0 px-4">
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
</MDBTypography>
</MDBCardFooter>
</MDBCard>
</MDBCol>
<MDBCol md="3">
<MDBCard border="dark">
<MDBCardBody className="mx-2">
<MDBCardTitle className="my-2">Freelancer</MDBCardTitle>
<p className="text-muted">
All the essentials for starting a business
</p>
<p className="h2 fw-bold">
$20
<small className="text-muted" style={{ fontSize: "18px" }}>
/mo
</small>
</p>
<MDBBtn
href="#"
color="dark"
className="d-block mb-2 mt-3 text-capitalize"
>
Buy Freelancer
</MDBBtn>
</MDBCardBody>
<MDBCardFooter>
<p
className="text-uppercase fw-bold"
style={{ fontSize: "12px" }}
>
What's included
</p>
<MDBTypography listUnStyled className="mb-0 px-4">
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
</MDBTypography>
</MDBCardFooter>
</MDBCard>
</MDBCol>
<MDBCol md="3">
<MDBCard border="dark">
<MDBCardBody className="mx-2">
<MDBCardTitle className="my-2">Startup</MDBCardTitle>
<p className="text-muted">
All the essentials for starting a business
</p>
<p className="h2 fw-bold">
$40
<small className="text-muted" style={{ fontSize: "18px" }}>
/mo
</small>
</p>
<MDBBtn
href="#"
color="dark"
className="d-block mb-2 mt-3 text-capitalize"
>
Buy Startup
</MDBBtn>
</MDBCardBody>
<MDBCardFooter>
<p
className="text-uppercase fw-bold"
style={{ fontSize: "12px" }}
>
What's included
</p>
<MDBTypography listUnStyled className="mb-0 px-4">
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
</MDBTypography>
</MDBCardFooter>
</MDBCard>
</MDBCol>
<MDBCol md="3">
<MDBCard border="dark">
<MDBCardBody className="mx-2">
<MDBCardTitle className="my-2">Enterprise</MDBCardTitle>
<p className="text-muted">
All the essentials for starting a business
</p>
<p className="h2 fw-bold">
$55
<small className="text-muted" style={{ fontSize: "18px" }}>
/mo
</small>
</p>
<MDBBtn
href="#"
color="dark"
className="d-block mb-2 mt-3 text-capitalize"
>
Buy Enterprise
</MDBBtn>
</MDBCardBody>
<MDBCardFooter>
<p
className="text-uppercase fw-bold"
style={{ fontSize: "12px" }}
>
What's included
</p>
<MDBTypography listUnStyled className="mb-0 px-4">
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
<li className="mb-3">
<MDBIcon fas icon="check" className="text-success me-3" />
<small>Lorem Ipsum</small>
</li>
</MDBTypography>
</MDBCardFooter>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
Comparison card with details
If you would like to highlight one of the pricing options, you can also create a separate, full-width feature card and place it above the main comparison table.
Lifetime Membership
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate quae deserunt excepturi nihil nobis. Hic dolores architecto quod dicta, iusto odio, sit quae cum, quos alias eveniet corrupti ab pariatur.
what’s included
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBCard className="border overflow-hidden">
<MDBCardBody className="px-0 py-0">
<MDBRow>
<MDBCol md="8" className="py-2 bg-white border">
<div className="mx-4 my-4">
<p className="h3 mb-3">
<strong>Lifetime Membership</strong>
</p>
<p className="text-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Cupiditate quae deserunt excepturi nihil nobis. Hic dolores
architecto quod dicta, iusto odio, sit quae cum, quos alias
eveniet corrupti ab pariatur.
</p>
<p
className="text-uppercase text-primary mb-3 new-section"
style={{ fontSize: "14px" }}
>
what’s included
<span className="line-pricing"></span>
</p>
<MDBRow>
<MDBCol md="6">
<MDBTypography listUnStyled className="mb-0 pt-0 pb-0">
<li className="mb-3">
<MDBIcon
fas
icon="check"
className="text-success me-3"
/>
<small>Lorem Ipsum</small>
</li>
<li className="mb-3">
<MDBIcon
fas
icon="check"
className="text-success me-3"
/>
<small>Lorem Ipsum</small>
</li>
</MDBTypography>
</MDBCol>
<MDBCol md="6">
<MDBTypography listUnStyled className="mb-0 pt-0 pb-0">
<li className="mb-3">
<MDBIcon
fas
icon="check"
className="text-success me-3"
/>
<small>Lorem Ipsum</small>
</li>
<li className="mb-3">
<MDBIcon
fas
icon="check"
className="text-success me-3"
/>
<small>Lorem Ipsum</small>
</li>
</MDBTypography>
</MDBCol>
</MDBRow>
</div>
</MDBCol>
<MDBCol
md="4"
className="text-center"
style={{
backgroundColor: "#F9FAFB",
boxShadow: "0px 0px 10px 1px #aaaaaa",
}}
>
<div className="mt-5 pt-4 me-4">
<p className="h5">Pay once, own it forever</p>
<p
className="h2 fw-bold text-black"
style={{ fontSize: "40px" }}
>
$199
<small class="text-muted ms-2" style={{ fontSize: "15px" }}>
USD
</small>
</p>
<p
className="text-decoration-underline text-black-50 "
style={{ fontSize: "15px" }}
>
Learn more about our company
</p>
<a
href="#"
className="btn btn-dark d-block mb-2 mt-3 text-capitalize"
>
Get Access
</a>
<p className="fw-bold mt-3" style={{ fontSize: "13px" }}>
Get a free sample <span className="text-muted">(20MB)</span>
</p>
</div>
</MDBCol>
</MDBRow>
</MDBCardBody>
</MDBCard>
</MDBContainer>
);
}
.new-section {
overflow: hidden;
color: gray;
text-align: left;
line-height: 1.6em;
}
.new-section::before {
display: block;
float: right;
margin-top: 0.7em;
border-top: 2px solid silver;
width: 78%;
content: "";
}