Cards

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.

Card header

Special title treatment

Support card subtitle

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

2 days ago

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 title

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

Go somewhere

.card-img-top and .card-img-bottom respectively set the top and bottom corners rounded to match the card’s borders. With .card-text , text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.

Card title

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Button

Card title

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

It is a long established fact that a the readable content of a page when looking at its layout.

Card link Another link

Card title

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

• Cras justo odio
• Vestibulum at eros

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

Card link Another link

Set a background-color with contrasting foreground color with our .text-bg-{color} helpers . Previously it was required to manually pair your choice of .text-{color} and .bg-{color} utilities for styling, which you still may use if you prefer.