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-block 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-block 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-block 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. Also use one of the .pull-*-* utility classes for proper alignment.

Nav Pill

Add the .card-header-pills class to the <ul> element. Also use one of the .pull-*-* utility classes for proper alignment.

Flush Content (Remove Padding)

By default, the .card-block 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-block (because it has padding).

Instead, remove the .card-block from the outer <div> and nest it inside (in its own <div>).

Now you can place the (flush) content outside the .card-block (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-block 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

Bootstrap has contextual classes available for cards. These enable you to switch the color based on the context.

You can use .card-primary, .card-success, .card-info, .card-warning, and .card-danger.

On darker colors, you can use .card-inverse to invert the text color.

Border Color

You can also use contextual colors on the card's border.

To do this, use one of the .card-outline-* classes.

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.

Alpha Release

Bootstrap 4 is currently in alpha release, therefore, do not use it in production yet. To be safe, refer to the Bootstrap 3 Tutorial until Bootstrap 4 becomes an official release.

Also check out the differences between Bootstrap v3 and v4.