Bootstrap 4 Cards
Cards add a flexible and extensible container for displaying content in a variety of ways.
A card is a container with light styling that you can place virtually any content into. Plenty of styling options are available such as alignment, padding, colors, headings, and more.
Basic Card
To create a basic card, apply the .card and .card-body classes to an element to create the outer card container.
Add .card-title to any heading elements and .card-text to text elements.
Header & Footer
You can add a header and/or footer by adding a <div> with .card-header or .card-footer.
Here I've also moved the .card-body to a new <div> inside the card. I did this to allow the card header to line up flush against the card border (the .card-body has padding which I don't want). More on flush content below.
HTML Headers
You can also apply the .card-header class to any HTML header element (i.e. <h1> - <h6> tags).
Header Navigation
You can also add a Bootstrap nav pill or nav tab to a card.
Nav Tab
Add the .card-header-tabs class to the <ul> element.
Nav Pill
Add the .card-header-pills class to the <ul> element.
Flush Content (Remove Padding)
By default, the .card-body class has padding. This provides a nice aesthetically pleasing space between the content and the card border.
Sometimes you might want to remove the padding and have content line up flush against the sides of the card.
To create flush content, don't put that content inside a .card-body (because it has padding).
Instead, remove the .card-body from the outer <div> and nest it inside (in its own <div>).
Now you can place the (flush) content outside the .card-body (but still inside the .card). This effectively removes the padding — allowing the content to line up flush against the sides of the card. You can have multiple .card-body elements if required.
Note that when using content with a fixed width (such as images), you may need to specify the width of the card to match that of the content.
Top & Bottom
You can have content such as images line up flush with the top of the card (so that the top corners of the image fit flush with the rounded corners of the card).
To do this, apply either the .card-img-top or .card-img-bottom class to the <img> tag.
List Groups
You can add list groups to cards. Use the .list-group-flush class to place it flush against the card's border.
Links
Add the .card-link class to the <a> element to display links inside cards.
Text Alignment
You can use any of Bootstrap's text alignment classes to align text within the card. These are .text-left, .text-right, .text-center, .text-justify, and .text-nowrap.
Contextual Color
You can use Bootstrap's text and background utilities to change the color of the card.
Border Color
You can also use Bootstrap's border utilities.
Image Overlay
You can apply a background image to a card, then have text appear over the top.
To do this, apply the .card-img-overlay class to the text content.
Card Width
Cards will fill the horizontal space by default. You can change the width via a number of methods.
CSS
You can specify the width explicitly using CSS. For example, you can use properties such as width or max-width. Some of the above examples use CSS to constrain the width of the cards.
Grid
As with any other content, you can place your cards inside a Bootstrap grid.
Card Groups
Card groups allow you to present multiple cards as a single attached element, with equal widths and heights.
To do this, nest all cards within a .card-group element.
If the example doesn't appear correctly, it is probably due to the small viewport size. Try this preview instead.
Card Decks
Card decks are similar to card groups, except the cards inside card decks aren't attached to each other.
To do this, nest all cards within a .card-deck element that is nested inside a .card-deck-wrapper.
If the example doesn't appear correctly, it is probably due to the small viewport size. Try this preview instead.
Card Columns
Bootstrap columns enable you to display multiple cards inside each column, each card stacked on top of the other.
To do this, nest all cards within a .card-columns element.
If the example doesn't appear correctly, it is probably due to the small viewport size. Try this preview instead.
New in Bootstrap 4
Cards are new in Bootstrap 4. Cards replace functionality that was previously provided by panels, wells, and thumbnails.