Card

A card is a content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

• Cards have no margin by default, so use spacing utilities as needed.
• Cards have no fixed width so it will fill the full width of its parent element. You can customize using various sizing options.

Create a container element and add .card class. Inside this you can any supported card contents(.card-header, .card-footer, .card-body, .card-title, .card-subtitle, .card-text, .card-link, .card-img, .card-img-top, .card-img-bottom, .card-img-overlay) as needed.

You can display group of cards and style them by wrapping .card container with .card-group or .card-deck or .card-column

Add other bootstrap components (navigation, list groups etc.) and utilities classes to style your cards like background color, border color etc.

Below is a basic example of a card.

Cards support variety of content, including images, text, list groups, links, and more.

It is the building block of cards. Add your contents of a card in the .card-body. Its adds a padded section within a card. Use it whenever needed.

Card titles are used by adding .card-title to a <h*> tag. Add .card-link to an <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag. Adding .card-title and the .card-subtitle in a .card-body item aligns nicely.

.card-img-top places an image to the top of the card. Additionally if you want to add text add them with .card-text style as needed using utilities or custom css.

Create lists of content(list group component) in a card with a flush list group.

Below is an example of fixed width card which has multiple card content types(image styles, blocks, text styles, and a list group).

Add an optional header and/or footer within a card using .card-header and .card-footer.

Create card headers by adding .card-header to <h*> elements.

Card footer is added using the standard Html 5 <footer> element with .blockquote-footer class created within .card-body.

Card footer is created by adding .card-footer.

Cards don't have specific width by deafult, so they are always 100% wide. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.

Using the grid, wrap cards in columns(.col-**) and rows(.row) as needed.

Use sizing utilities to quickly set a card's width.

Use inline styles or custom CSS in your stylesheets to set a width.

Using text align classes you can change the text alignment of any card entirety or specific parts.

Add navigation(Bootstrap's nav components) to a card's header.

You can append image("image caps") at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Similar to headers and footers, cards can include top and bottom "image caps"-images at the top(.card-img-top) or bottom(.card-img-bottom) of a card.

Add a image as a background of a card background and overlay your card's by wrapping text content with .card-img-overlay. Depending on the image ass additional styles or utilities as needed.

You can customize a card's backgrounds, borders, and color.

Use text and background utilities to change the appearance of a card as your need.

Using color only provides a visual indication. To support assistive technologies such as screen readers, add information denoted by the color through additional text hidden with the .sr-only class which helps non-visual users.

To change just the border-color of a card use border utilities. To match the text color as of border color use text utilities classes on the parent .card or a subset of the card's contents(.card-body).

You can also change the borders on the card header and footer as needed and also remove background-color with .bg-transparent.

Bootstrap provide options for laying out series of cards. These layout options are not yet responsive.

Card groups render cards as a single, attached element with equal width and height columns. To achieve uniform sizing card groups use display: flex;.

When using card groups with footers, their content will automatically line up.

Use .card-deck when you need to set equal width and height for series of cards.

Just like with card groups, card footers in decks will automatically line up.

Wrap the cards with .card-columns to create masonry-like columns. For easier alignment cards are built with CSS column properties instead of flexbox. Cards are ordered from top to bottom and left to right.

You can extend .card-columns class extend with some additional code for changing the number of columns.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}