Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Cards

Bootstrap 4 cards provide a flexible and extensible content container with multiple variants and options.

It includes the options for headers and footers, color, content, and powerful display options.

Bootstrap 4 Cards

Author Name

Some quick example text to build the card's content.


Basic Card

The building block of a card is the .card-body. Use it whenever you need a padded section within a .card.

Basic card
Run code

Card Header and Footer

Featured (Card Header)

Special title treatment

(Card Body)

With supporting text below as a natural lead-in to additional content.

The .card-header class provides header to the cards and .card-footer class provides footer to the cards.

Run code

Card Styles

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

Header
Primary Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Default Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Run code

Titles, text and links

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

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

Subtitles are used by adding a .card-subtitle to a <h*> tag.

In the same way, links are used by adding .card-link to an <a> tag.

The .card-text class is used to remove bottom margins for a <p> element if it is the last child inside .card-body.

Run code

Card Sizing

Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated.

You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.

Card title

With supporting text below as a natural lead-in to additional content.

Card title

With supporting text below as a natural lead-in to additional content.

Run code

Card Images

Bootstrap 4 Cards

Author Name

Some quick example text to build the card's content.

Author Name

Some quick example text to build the card's content.

Bootstrap 4 Cards

Use .card-img-top or .card-img-bottom to place the image at top or bottom inside the card.

Note that we have added the image outside of the .card-body to span the entire width.

Run code

Stretched Link

To make the whole card clickable and hoverable, add the .stretched-link class to a link inside the card.

Bootstrap 4 Cards

Author Name

Some quick example text to build the card's content.

See Profile

Author Name

Some quick example text to build the card's content.

See Profile
Bootstrap 4 Cards
Run code

Card Image Overlays

Bootstrap 4 Cards

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Turn an image into a card background and use .card-img-overlay to add text on top of the image.

Depending on the image, you may or may not need additional styles or utilities.

Run code

Horizontal Card

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.

Bootstrap 4 Cards

Card title

This is a wider card with supporting text below. This content is a little bit longer.

Last updated 3 mins ago

In the example below, we remove the grid gutters with .no-gutters and use .col-sm-* classes to make the card horizontal at the sm breakpoint.

Run code

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

Bootstrap 4 Cards

Name

  • Software Engineer
  • New Delhi, India
  • demo@mail.com
  • 0123456789
Run code

Card Groups

Use .card-group to render cards as a single, attached element with equal width and height columns.

Bootstrap 4 Cards

Author Name

Some quick example text to build the card's content.

Bootstrap 4 Cards

Author Name

Some text.

Bootstrap 4 Cards

Author Name

Some quick example text to build the card's content.

Note: The cards are displayed vertically on small screens (less than 576px), with top and bottom margin:

Run code

Card Decks

If you need a set of equal width and height cards that aren’t attached to one another, use .card-deck class.

The .card-deck class is similar to .card-group. The only difference is that the .card-deck class adds left and right margins between each card.

Bootstrap 4 Cards

Author Name

Some quick example text to build the card's content.

Bootstrap 4 Cards

Author Name

Some text.

Bootstrap 4 Cards

Author Name

Some quick example text to build the card's content.

Note: The cards are displayed vertically on small screens (less than 576px):

Run code

Card Columns

The .card-columns class creates a Masonry-like grid of cards (like pinterest). The layout will automatically adjust as you insert more cards. Cards are ordered from top to bottom and left to right.

Note: The cards are displayed vertically on small screens (less than 576px):

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Run code