Card
Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
Card basic
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.
Some quick example text to build on the card title and make up the bulk of the card's content.
Card types
oggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Header and Footer
You may add a header and footer by adding a <Card.Header> and <Card.Footer> component.
With supporting text below as a natural lead-in to additional content.
Titles, text, and links
Using <Card.Title>, <Card.Subtitle>, and <Card.Text> inside the <Card.Body> will line them up nicely. <Card.Link>s are used to line up links next to each other.
Some quick example text to build on the card title and make up the bulk of the card's content.
Card LinkAnother LinkKitchen sink
Mix and match multiple content types to create the card you need, or throw everything in there.Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
Some quick example text to build on the card title and make up the bulk of the card's content.
Image overlays
Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
Horizontal
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.
This is a wider card with supporting text.
Card sizes
Use classes .card-lg, card-sm for sizes.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Navigation
Add some navigation to a card’s header (or block) with React Bootstrap’s Nav components.
With supporting text below as a natural lead-in to additional content.
Card Groups
Use <CardGroup> to render cards as a single, attached element with equal width and height columns. <CardGroup> use display: flex; to achieve their uniform sizing.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This card has supporting text below as a natural lead-in to additional content.
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.
Background and color
You can change a card's appearance by changing their bg props.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Border
Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card's contents as shown below.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Card with action
Add as many actions in a card header. Add .card-header-action in .card-header. Given actions are for fullscreen, refresh, close, collapse and dropdown.
Card Header
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard Header
With supporting text below as a natural lead-in to additional content.
Action in Card Body
Instead of card header you can also add close action inside card-body.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
Card with Indicators
Use badges and badge indicators with cards.
Card Header
With supporting text below as a natural lead-in to additional content.
Card Header
With supporting text below as a natural lead-in to additional content.
Card Header
With supporting text below as a natural lead-in to additional content.
Card with table
Use tables inside cards
Card with table
| # | Username | Role |
|---|---|---|
| 1 | Brincker123 | admin |
| 2 | Hay123 | member |
Card with icons
Use icons with card header.
Some quick example text to build on the card title and make up the bulk of the card's content.
Card with badge
Use badges in card header.
Card with badgebadge
Some quick example text to build on the card title and make up the bulk of the card's content.
Card with headings
Mix and match headings in cards.
Card Header
With supporting text below as a natural
With supporting text below as a natural lead-in to additional content.
Card with iconsub heading
Some quick example text to build on the card title and make up the bulk of the card's content.
Card with progress bar
Use progress bars with cards.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
Card with line
Check the cards with line stylization.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
Card with Image Carousel
A card can have carousel within image parent.
Some quick example text to build on the card title and make up the bulk of the card's content.