React Bootstrap Panels
React Panels - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Basic example
Panels are built with as little markup and styles as possible, but still manage to deliver a ton of control and
customization. They have no margin by default, so use
spacing utilities as needed.
Below is an example of a basic panel with mixed content and a fixed width. Panels have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easy to customize.
Panel title
Some quick example text to build on the card title and make up the bulk of the card's content.
import React from 'react';
import { MDBCard, MDBCardTitle, MDBCardText, MDBContainer } from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBCard className="card-body" style={{ width: "22rem", marginTop: "1rem" }}>
<MDBCardTitle>Panel Title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the panel title and make up the
bulk of the panel's content.
</MDBCardText>
<div className="flex-row">
<a href="#!">MDBCard link</a>
<a href="#!" style={{ marginLeft: "1.25rem" }}>Another link</a>
</div>
</MDBCard>
</MDBContainer>
);
};
export default PanelPage;
Content types
Panels support a wide variety of content, including text, list groups, links, and more. Below are examples of what’s supported.
Body
The building block of a panel is the
<MDBCardBody> component. Use it whenever you need a padded section within a panel.
import React from 'react';
import { MDBCard, MDBCardBody, MDBContainer } from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBCard>
<MDBCardBody>This is some text within a panel body.</MDBCardBody>
</MDBCard>
</MDBContainer>
);
};
export default PanelPage;
Titles, text and links
Panel titles are created by using <MDBCardTitle> component, while their size can be
adjusted by using a tag prop with appropriate <h*> value. Subtitles are used by
adding a
sub prop to CardTitle together with, for example, tag="h5". All of
them get aligned nicely within the <CardBody>.
Panel title
Panel subtitle
Some quick example text to build on the panel title and make up the bulk of the panel's content.
Panel link Another link
import React from 'react';
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBContainer } from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBCard style={{ width: "22rem", marginTop: "1rem" }}>
<MDBCardBody>
<MDBCardTitle>Panel title</MDBCardTitle>
<MDBCardTitle tag="h6" sub className="mb-2 text-muted">
Panel title
</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the panel title and make up
the bulk of the panel's content.{" "}
</MDBCardText>
<a href="#!" className="card-link">
Panel link
</a>
<a href="#!" className="card-link">
Another link
</a>
</MDBCardBody>
</MDBCard>
</MDBContainer>
);
};
export default PanelPage;
List groups
Create lists of content in a panel with a flush list group.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
import React from 'react';
import { MDBCard, MDBListGroup, MDBListGroupItem, MDBContainer } from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBCard style={{ width: "22rem", marginTop: "1rem" }}>
<MDBListGroup>
<MDBListGroupItem>Cras justo odio</MDBListGroupItem>
<MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
<MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
</MDBListGroup>
</MDBCard>
</MDBContainer>
);
};
export default PanelPage;
Sizing
Panels don't assume start width, so they’ll be 100% wide unless stated. You can change this as needed with custom CSS or grid components.
Using grid components
Using the grid, wrap cards in <MDBCol> and <MDBRow> as
needed.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
import React from 'react';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
MDBCol,
MDBRow,
MDBContainer
} from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBRow className="mb-4">
<MDBCol sm="6">
<MDBCard>
<MDBCardBody>
<MDBCardTitle>Special title treatment</MDBCardTitle>
<MDBCardText>
With supporting text below as a natural lead-in to additional
content.
</MDBCardText>
<MDBBtn color="primary">go somewhere</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol sm="6">
<MDBCard>
<MDBCardBody>
<MDBCardTitle>Special title treatment</MDBCardTitle>
<MDBCardText>
With supporting text below as a natural lead-in to additional
content.
</MDBCardText>
<MDBBtn color="primary">go somewhere</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
};
export default PanelPage;
Using utilities
Use our handful of available sizing utilities to quickly set a panel's width.
import React from 'react';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
MDBCol,
MDBRow,
MDBContainer
} from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBCard className="w-75 mb-4">
<MDBCardBody>
<MDBCardTitle>Special title treatment</MDBCardTitle>
<MDBCardText>
With supporting text below as a natural lead-in to additional
content.
</MDBCardText>
<MDBBtn color="primary">go somewhere</MDBBtn>
</MDBCardBody>
</MDBCard>
<MDBCard className="w-50">
<MDBCardBody>
<MDBCardTitle>Special title treatment</MDBCardTitle>
<MDBCardText>
With supporting text below as a natural lead-in to additional
content.
</MDBCardText>
<MDBBtn color="primary">go somewhere</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBContainer>
);
};
export default PanelPage;
Using custom CSS
Use custom CSS in your stylesheets or as inline styles to set a width.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
import React from 'react';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBContainer,
MDBBtn
} from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBCard style={{ width: "22rem", marginTop: "1rem" }}>
<MDBCardBody>
<MDBCardTitle>Special title treatment</MDBCardTitle>
<MDBCardText>
With supporting text below as a natural lead-in to additional content.
</MDBCardText>
<MDBBtn color="primary">go somewhere</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBContainer>
);
};
export default PanelPage;
Text Alignment
You can quickly change the text alignment of any panel -in its entirety or specific parts- with our text align classes.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
import React from 'react';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
MDBContainer
} from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBCard style={{ width: "20rem", marginTop: "1rem" }}>
<MDBCardBody>
<MDBCardTitle>Special title treatment</MDBCardTitle>
<MDBCardText>
With supporting text below as a natural lead-in to additional
content.
</MDBCardText>
<MDBBtn color="primary">go somewhere</MDBBtn>
</MDBCardBody>
</MDBCard>
<MDBCard className="text-center" style={{ width: "20rem", marginTop: "1rem" }}>
<MDBCardBody>
<MDBCardTitle>Special title treatment</MDBCardTitle>
<MDBCardText>
With supporting text below as a natural lead-in to additional
content.
</MDBCardText>
<MDBBtn color="primary">go somewhere</MDBBtn>
</MDBCardBody>
</MDBCard>
<MDBCard className="text-right" style={{ width: "20rem", marginTop: "1rem" }}>
<MDBCardBody>
<MDBCardTitle>Special title treatment</MDBCardTitle>
<MDBCardText>
With supporting text below as a natural lead-in to additional
content.
</MDBCardText>
<MDBBtn color="primary">go somewhere</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBContainer>
);
};
export default PanelPage;
Styles
Cards include various options for customizing their backgrounds, borders, and color.
Background and color
Use the color prop together with
text and background color utilities to change the
appearance of a panel. Including it automatically turns the text color to white, but this behavior is easy to
overwrite with the textColor taking in the same values as color.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
import React from 'react';
import { MDBCard, MDBCardBody, MDBCol, MDBRow, MDBContainer } from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol md="6" className="mb-4">
<MDBCard color="indigo" text="white" className="text-center">
<MDBCardBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.
</MDBCardBody>
</MDBCard>
<MDBCard color="pink lighten-2" text="white" className="text-center">
<MDBCardBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.
</MDBCardBody>
</MDBCard>
<MDBCard color="info-color" text="white" className="text-center">
<MDBCardBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol md="6">
<MDBCard color="red lighten-1" text="white" className="text-center">
<MDBCardBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.
</MDBCardBody>
</MDBCard>
<MDBCard color="success-color" text="white" className="text-center">
<MDBCardBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.
</MDBCardBody>
</MDBCard>
<MDBCard color="mdb-color lighten-2" text="white" className="text-center">
<MDBCardBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
};
export default PanelPage;
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the
.sr-onlyclassName.
Border
Use border prop to change the border-color CSS property of a panel.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
import React from 'react';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBListGroup,
MDBListGroupItem,
MDBCardHeader,
MDBCardFooter,
MDBRow,
MDBContainer
} from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBRow center>
<MDBCard border="primary" className="m-3" style={{ maxWidth: "18rem" }}>
<MDBCardHeader>Header</MDBCardHeader>
<MDBCardBody className="text-primary">
<MDBCardTitle tag="h5">Primary card title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard border="secondary" className="m-3" style={{ maxWidth: "18rem" }}>
<MDBCardHeader>Header</MDBCardHeader>
<MDBCardBody className="text-secondary">
<MDBCardTitle tag="h5">Secondary card title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard border="success" className="m-3" style={{ maxWidth: "18rem" }}>
<MDBCardHeader>Header</MDBCardHeader>
<MDBCardBody className="text-success">
<MDBCardTitle tag="h5">Success card title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard border="danger" className="m-3" style={{ maxWidth: "18rem" }}>
<MDBCardHeader>Header</MDBCardHeader>
<MDBCardBody className="text-danger">
<MDBCardTitle tag="h5">Danger card title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard border="warning" className="m-3" style={{ maxWidth: "18rem" }}>
<MDBCardHeader>Header</MDBCardHeader>
<MDBCardBody className="text-warning">
<MDBCardTitle tag="h5">Warning card title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard border="info" className="m-3" style={{ maxWidth: "18rem" }}>
<MDBCardHeader>Header</MDBCardHeader>
<MDBCardBody className="text-info">
<MDBCardTitle tag="h5">Info card title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard border="light" className="m-3" style={{ maxWidth: "18rem" }}>
<MDBCardHeader>Header</MDBCardHeader>
<MDBCardBody>
<MDBCardTitle tag="h5">Light card title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard border="dark" className="m-3" style={{ maxWidth: "18rem" }}>
<MDBCardHeader>Header</MDBCardHeader>
<MDBCardBody className="text-dark">
<MDBCardTitle tag="h5">Dark card title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</MDBCardText>
</MDBCardBody>
</MDBCard>
</MDBRow>
</MDBContainer>
);
};
export default PanelPage;
Mixin utilities
You can also change the borders on the panel header and footer as needed, and even remove
their
background-color with the transparent prop.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
import React from 'react';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBCardHeader,
MDBCardFooter,
MDBContainer
} from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBCard border="success" style={{ maxWidth: "18rem" }}>
<MDBCardHeader transparent border="success">
Header
</MDBCardHeader>
<MDBCardBody className="text-success">
<MDBCardTitle tag="h5">Success card title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</MDBCardText>
</MDBCardBody>
<MDBCardFooter transparent border="success">
Footer
</MDBCardFooter>
</MDBCard>
</MDBContainer>
);
};
export default PanelPage;
Layout
In addition to styling the content within panels, Bootstrap includes a few options for laying out series of panels.
Groups
Use <MDBCardGroup> to render cards as a single, attached element with
equal
width
and
height columns. Card groups use
display: flex; to achieve their uniform sizing.
Panel title
This is a wider panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Panel title
This panel has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Panel title
This is a wider panel with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
import React from 'react';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBCardGroup,
MDBContainer
} from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBCardGroup>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This is a wider panel with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</MDBCardText>
<MDBCardText small muted>
Last updated 3 mins ago
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This panel has supporting text below as a natural lead-in to
additional content.
</MDBCardText>
<MDBCardText small muted>
Last updated 3 mins ago
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This is a wider panel with supporting text below as a natural
lead-in to additional content. This panel has even longer
content than the first to show that equal height action.
</MDBCardText>
<MDBCardText small muted>
Last updated 3 mins ago
</MDBCardText>
</MDBCardBody>
</MDBCard>
</MDBCardGroup>
</MDBContainer>
);
};
export default PanelPage;
When using card groups with footers, their content will automatically line up.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
import React from 'react';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBCardFooter,
MDBCardGroup,
MDBContainer
} from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBCardGroup>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This is a wider panel with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</MDBCardText>
</MDBCardBody>
<MDBCardFooter small muted>
Last updated 3 mins ago
</MDBCardFooter>
</MDBCard>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This panel has supporting text below as a natural lead-in to
additional content.
</MDBCardText>
</MDBCardBody>
<MDBCardFooter small muted>
Last updated 3 mins ago
</MDBCardFooter>
</MDBCard>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This is a wider panel with supporting text below as a natural
lead-in to additional content. This panel has even longer
content than the first to show that equal height action.
</MDBCardText>
</MDBCardBody>
<MDBCardFooter small muted>
Last updated 3 mins ago
</MDBCardFooter>
</MDBCard>
</MDBCardGroup>
</MDBContainer>
);
};
export default PanelPage;
Decks
Need a set of equal width and height panel that aren’t attached to one another? Use decks.
Panel title
This is a longer panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Panel title
This panel has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Panel title
This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.
Last updated 3 mins ago
import React from 'react';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBCardGroup,
MDBContainer
} from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBCardGroup deck>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This is a wider panel with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</MDBCardText>
<MDBCardText small muted>
Last updated 3 mins ago
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This panel has supporting text below as a natural lead-in to
additional content.
</MDBCardText>
<MDBCardText small muted>
Last updated 3 mins ago
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This is a wider panel with supporting text below as a natural
lead-in to additional content. This panel has even longer
content than the first to show that equal height action.
</MDBCardText>
<MDBCardText small muted>
Last updated 3 mins ago
</MDBCardText>
</MDBCardBody>
</MDBCard>
</MDBCardGroup>
</MDBContainer>
);
};
export default PanelPage;
Just like before, card footers in decks will automatically line up.
Panel title
This is a wider panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Panel title
This panel has supporting text below as a natural lead-in to additional content.
Panel title
This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.
import React from 'react';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBCardFooter,
MDBCardGroup,
MDBContainer
} from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBCardGroup deck>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This is a wider panel with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</MDBCardText>
</MDBCardBody>
<MDBCardFooter small muted>
Last updated 3 mins ago
</MDBCardFooter>
</MDBCard>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This panel has supporting text below as a natural lead-in to
additional content.
</MDBCardText>
</MDBCardBody>
<MDBCardFooter small muted>
Last updated 3 mins ago
</MDBCardFooter>
</MDBCard>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This is a wider panel with supporting text below as a natural
lead-in to additional content. This panel has even longer
content than the first to show that equal height action.
</MDBCardText>
</MDBCardBody>
<MDBCardFooter small muted>
Last updated 3 mins ago
</MDBCardFooter>
</MDBCard>
</MDBCardGroup>
</MDBContainer>
);
};
export default PanelPage;
Columns
Panels can be organized into
Masonry-like columns with just CSS
by
using the column prop on CardGroup. Panels are built with CSS
column properties instead of flexbox for easier alignment. Panels are ordered from top to bottom
and
left to right.
Panel title that wraps to a new line
This is a longer panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Panel title
This panel has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Panel title
This panel has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Panel title
This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.
Last updated 3 mins ago
import React from 'react';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBCardGroup,
MDBContainer
} from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBCardGroup column>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">
Panel title that wraps to a new line
</MDBCardTitle>
<MDBCardText>
This is a longer panel with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard className="p-3">
<blockquote className="blockquote mb-0 card-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.
</p>
<footer className="blockquote-footer">
<small className="text-muted">
Someone famous in{" "}
<cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</MDBCard>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This panel has supporting text below as a natural lead-in to
additional content.
</MDBCardText>
<MDBCardText small muted>
Last updated 3 mins ago
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard color="primary-color" text="white" className="text-center p-3">
<blockquote className="blockquote mb-0">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat.
</p>
<footer className="blockquote-footer">
<small className="text-white">
Someone famous in{" "}
<cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</MDBCard>
<MDBCard className="text-center">
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This panel has supporting text below as a natural lead-in to
additional content.
</MDBCardText>
<MDBCardText small muted>
Last updated 3 mins ago
</MDBCardText>
</MDBCardBody>
</MDBCard>
<MDBCard className="text-right p-3">
<blockquote className="blockquote mb-0 card-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.
</p>
<footer className="blockquote-footer">
<small className="text-muted">
Someone famous in{" "}
<cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</MDBCard>
<MDBCard>
<MDBCardBody>
<MDBCardTitle tag="h5">Panel title</MDBCardTitle>
<MDBCardText>
This is a wider panel with supporting text below as a natural
lead-in to additional content. This panel has even longer
content than the first to show that equal height action.
</MDBCardText>
<MDBCardText small muted>
Last updated 3 mins ago
</MDBCardText>
</MDBCardBody>
</MDBCard>
</MDBCardGroup>
</MDBContainer>
);
};
export default PanelPage;
Jumbotron
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
Hello, world!
This is a simple hero unit, a simple jumbotron-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.
Learn more
import React from 'react';
import { MDBBtn, MDBJumbotron, MDBContainer } from "mdbreact";
const PanelPage = () => {
return (
<MDBContainer>
<MDBJumbotron>
<h1 className="h1-responsive">Hello, world!</h1>
<p className="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<hr className="my-2" />
<p>
It uses utility classNamees for typography and spacing to space
content out within the larger MDBContainer.
</p>
<MDBBtn color="primary" size="lg">
Learn more
</MDBBtn>
</MDBJumbotron>
</MDBContainer>
);
};
export default PanelPage;
React Panels - API
In this section you will find advanced information about the Panels component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Import statement
Panels are variation of Cards, so make sure you have imported proper modules first.
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBCardHeader
} from "mdbreact";
API Reference: Card Properties
The table below shows the configuration options of the MDBCard component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
border |
String | |
Sets border color | <MDBCard border="default" /> |
cascade |
Boolean | false |
Switches the Card to cascade style mode | <MDBCard cascade /> |
className |
String | |
Adds custom classes | <MDBCard className="customClass" /> |
collection |
Boolean | false |
Switches on styles for collection Card | <MDBCard collection /> |
ecommerce |
Boolean | false |
Switches on styles for ecommerce Card | <MDBCard ecommerce /> |
narrow |
Boolean | false |
Makes cascading Card content body wider than header | <MDBCard narrow /> |
news |
Boolean | false |
Switches on styles for news Card | <MDBCard news /> |
personal |
Boolean | false |
Switches on styles for personal Card | <MDBCard personal /> |
pricing |
Boolean | false |
Switches on styles for pricing Card | <MDBCard pricing /> |
reverse |
Boolean | false |
Makes Card header wider and places content body on the header | <MDBCard reverse /> |
tag |
String | div |
Changes the default html tag for Card component | <MDBCard tag="div" /> |
testimonial |
Boolean | false |
Switches on styles for testimonial Card | <MDBCard testimonial /> |
wide |
Boolean | false |
Makes cascading Card header wider than content body | <MDBCard wide /> |
API Reference: CardBody Properties
The table below shows the configuration options of the MDBCardBody component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
cascade |
Boolean | false |
Switches the CardBody to cascade style mode | <MDBCardBody cascade /> |
className |
String | |
Adds custom classes | <MDBCardBody className="customClass" /> |
tag |
String | div |
Changes the default html tag for CardBody component | <MDBCardBody tag="div" /> |
API Reference: CardTitle Properties
The table below shows the configuration options of the MDBCardTitle component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className |
String | |
Adds custom classes | <MDBCardTitle className="customClass" /> |
sub |
Boolean | false |
Styles title as subtitle | <MDBCardTitle sub /> |
tag |
String | img |
Changes the default html tag for component | <MDBCardTitle tag="div" /> |
API Reference: CardText Properties
The table below shows the configuration options of the MDBCardText component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className |
String | |
Adds custom classes | <MDBCardText className="customClass" /> |
muted |
Boolean | false |
Mutes the text color | <MDBCardText muted /> |
small |
Boolean | false |
Uses html small as component's tag |
<MDBCardText small /> |
tag |
String | img |
Changes the default html tag for component | <MDBCardText tag="div" /> |