Bootstrap 4 tutorial

Components (3): Cards

Cards

Example

Card title

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

Go somewhere

Structure

Card div.card Attribute
- Attribute (sets width) style="width: 18rem;"
- Image (top) img.card-img-top Attributes
  - Attribute src="..."
  - Attribute alt="..."
- Body div.card-body
  - Title h5.card-title
    - Title text Card title
  - Text content p.card-text
    - Text Some quick example text ...
  - Button a.btn.btn-(primary|secondary|...) Attribute
    - Attribute href="..."
    - Text Go somewhere

Content types

Content classes for building cards (also can be used for other purposes).

Body

Use div.card-body

This is some text within a card body.

Structure

div.card
- div.card-body
  - Text This is some text within a card body.

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

Structure

Title (h1|h2|h3...).card-title (used h5.card-title above)
Subtitle (h1|h2|h3...).card-subtitle (used h6.card-subtitle above)
Link (a).card-link
Text (p).card-text

Images

Use img.card-img-top to set an image on the top.

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

Structure

div.card
- img.card-img-top
- div.card-body

Note: It is set as a first child of a card (not within a card body). See Using images for detail.

List groups

Flush list

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Structure

Flush list ul.list-group.list-group-flush
- List items li.list-group-item

List header

Featured

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Structure

Card div.card
- Header (Featured) div.card-header (sticks to the next flush list)
- Flush list (same as above)

Kitchen sink

Card title

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card link Another link

Structure

Card div.card
- Image (top) img.card-img-top
- Card body div.card-body (stacks inner subcomponents)
  - Title h5.card-title
  - Text p.card-text
  - Flush list ul.list-group.list-group-flush
  - Links a.card-link (×2, arranged inline) Attribute
    - Attribute href="..."
    - Text (e.g.) Card link

Header and footer

Structure

Card (parent) div.card
- (Optional) header (as the first child) div.card-header
- Body ( div.card-body , etc.)
- (Optional) footer (as the last child) div.card-footer

Header example (Featured)

Featured

Special title treatment

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

Go somewhere

Emphasizing the header text with h5.card-header

Featured

Special title treatment

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

Go somewhere

Using a blockquote in a card body (see Typography - Blockquotes )

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Setting both header+footer, also center-aligned with .text-center

Featured

Special title treatment

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

Go somewhere

2 days ago

Sizing

div.card sets the width to 100% within the parent as default. There are various ways to specify widths you need.

Using grid markup

Responsive example: switchs layouts on md breakpoint (768px)

Special title treatment (1)

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

Go somewhere

Special title treatment (2)

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

Go somewhere

Structure

div.row
- div.col-md-6
  - div.card
    - Inside (same as above)
- div.col-md-6
  - div.card
    - Inside (same as above)

Using utilities

Use .w-(25|50|75|100) (see Sizing utilities ).

div.card.w-75

Card title

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

Button

div.card.w-50

Card title

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

Button

Using custom CSS

Use style="width: ...;"

div.card + style="width: 16rem;"

Card title

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

Button

div.card + style="width: 24rem;"

Card title

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

Button

Text alignment

Use .text-(left|center|right) (see Text - alignment ).

div.card.text-left (default)

Special title treatment

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

Go somewhere

div.card.text-center

Special title treatment

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

Go somewhere

div.card.text-right

Special title treatment

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

Go somewhere

Below are the examples using Nav components.

ul.nav.nav-tabs.card-header-tabs

Special title treatment

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

Go somewhere

ul.nav.nav-pills.card-header-tabs

Special title treatment

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

Go somewhere

Using images

Use img.card-img-(top|bottom) to set image(s) as a header and/or a footer.

img.card-img-bottom

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

img.card-img-bottom

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

Image overlays

Use div.card-img-overlay to overlay text within an image.

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

Background and color

Examples using Colors utilities classes

div.card.text-white.bg-primary

Header

Primary card title

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

div.card.text-white.bg-secondary

Header

Secondary card title

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

div.card.text-white.bg-success

Header

Success card title

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

div.card.text-white.bg-danger

Header

Danger card title

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

div.card.text-white.bg-warning

Header

Warning card title

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

div.card.text-white.bg-info

Header

Info card title

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

div.card.bg-light

Header

Light card title

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

div.card.text-white.bg-dark

Header

Dark card title

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

Border

Examples using Borders utilities (see Border color )

div.card.border-primary

Header

Primary card title

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

div.card.border-secondary

Header

Secondary card title

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

div.card.border-success

Header

Success card title

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

div.card.border-danger

Header

Danger card title

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

div.card.border-warning

Header

Warning card title

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

div.card.border-info

Header

Info card title

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

div.card.border-light

Header

Light card title

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

div.card.border-dark

Header

Dark card title

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

You can set different colors to each subcomponents as header, footer, etc. Furthermore, using .bg-transparent removes default background color. Bellow are variations to set header/footer background colors.

Structure

div.card.border-success
- div.card-header with background variations (default, all contexts, and transparent)
- p.card-body.text-success
- div.card-footer with background variations (default, all contexts, and transparent)

(Default background)

Default header

Success card title

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

Default footer

.bg-primary

Primary header

Success card title

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

Primary footer

.bg-secondary

Secondary header

Success card title

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

Secondary footer

.bg-success

Success header

Success card title

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

Success footer

.bg-danger

Danger header

Success card title

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

Danger footer

.bg-warning

Warning header

Success card title

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

Warning footer

.bg-info

Info header

Success card title

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

Info footer

.bg-light

Light header

Success card title

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

Light footer

.bg-dark

Dark header

Success card title

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

Dark footer

.bg-transparent

Transparent header

Success card title

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

Transparent footer

Card layout

Use div.card-(group|deck|columns) to layout multiple cards.

div.card-(group|deck|columns)
- Series of cards div.card

div.card-group

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

Card title

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

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

div.card-deck

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

Card title

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

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

div.card-columns (advanced) Masonry-like columns layout

(1) Card title that wraps to a new line

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

(2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

(3) Card title

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

Last updated 3 mins ago

(4) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

(5) Card title

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

Last updated 3 mins ago

(6) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

(7) Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago