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.

Points to remember
  • 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.
How to use

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.

Content types

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

Body

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.

Titles, text, and links

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.

Images

.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.

List groups

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

Kitchen sink

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

Header and footer

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.

Sizing

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 Grid

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

Using utilities

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

Using custom CSS/ inline styles

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

Text alignment

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

Navigation

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

Images

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.

Image caps

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.

Image overlays

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.

Card styles

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

Background and color

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

Note
Note Accessibility
Conveying meaning to assistive technologies

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.

Border

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).

Mixins utilities

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

Card layout

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

Card groups

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.

Card decks

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.

Card columns

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;
  }
}
Related Tutorial
1 Alerts
2 Badge
6 Card

10 Forms
14 Modal
15 Navs
16 Navbar
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #