Bootstrap Tutorial

BS4 HomeBS4 Container

BS4 Borders

BS4 Border AdditiveBS4 Border SubtractiveBS4 Border ColorBS4 Border Radius

BS4 Float

BS4 floatBS4 clearfix

BS4 Close icon

BS4 Close Icon

BS4 Colors

BS4 ColorBS4 Background color

BS4 Display

BS4 Display NotationBS4 Display in Print

BS4 Embed

BS4 embed

BS4 Flex

BS4 FlexBS4 Flex DirectionBS4 justify-contentBS4 align-itemsBS4 align-selfBS4 align-contentBS4 Flex GrowBS4 Flex ShrinkBS4 Flex FillBS4 Flex WrapBS4 OrderBS4 Auto Margins

BS4 Sizing

BS4 WidthBS4 Height

BS4 Spacing

BS4 MarginBS4 PaddingBS4 Horizontal centering

BS4 Text

BS4 Text alignmentBS4 Text wrappingBS4 Text transformBS4 Font weight and italicsBS4 Text decorationBS4 Text resetBS4 Text monospace

BS4 Alignment

BS4 Vertical alignment

BS4 Visibility

BS4 Visibility

BS4 Overflow

BS4 Overflow

BS4 Link

BS4 Stretched Link

BS4 Shadow

BS4 Shadow

BS4 Position

BS4 Position

BS4 Typography

BS4 Typography HeadingsBS4 Typography Custom HeadingsBS4 Typography Display HeadingsBS4 Typography LeadBS4 Typography Inline textBS4 Typography AbbreviationsBS4 Typography BlockquotesBS4 Typography List UnstyledBS4 Typography List Inline

BS4 Code

BS4 Code InlineBS4 Code BlocksBS4 Code VariablesBS4 Sample OutputBS4 User input

BS4 Image

BS4 Image ResponsiveBS4 Image Thumbnails

BS4 Figures

BS4 Figure

BS4 Grid

BS4 Grid

BS4 Media Object

BS4 Media Object

BS4 Table

BS4 TableBS4 Table HeadBS4 Table CaptionsBS4 Table Responsive

BS4 Components

BS4 AlertBS4 BadgeBS4 BreadcrumbBS4 ButtonBS4 Button GroupBS4 CardBS4 CarouselBS4 CollapseBS4 DropdownBS4 FormBS4 Input GroupBS4 JumbotronBS4 List GroupBS4 ModalBS4 NavsBS4 NavbarBS4 PaginationBS4 PopoversBS4 ProgressBS4 SpinnersBS4 TooltipsBS4 ToastsBS4 Scrollspy

Bootstrap4 Card

Last Updated:

Basic Card

Use .card class to create a basic card.

Example

tiger
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 with Body Only

Use .card-body class to create a body of the card.

Example

This is some text within a card body.

Card with Title, Text, and Link

use .card-title, .card-text, and .card-link to create card title, card text, and card link.

Example

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 with Image

Use .card-img to create an image inside a card.

tiger

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

Card with List Groups

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

Example

  • Tiger
  • Cheetah
  • Jaguar

Card with List Groups and Header

Create lists of content in a card with a flush list group and header.

Example

Featured
  • Tiger
  • Cheetah
  • Jaguar

Card with Multiple Content

Mix and match multiple content types to create the card you need, or throw everything in there.

Example

tiger
Card title

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

  • Cheetah
  • Jaguar
  • Leopard

Card with Header and Footer

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

Example

Quote

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

Someone famous in Source Title

Card with Text Alignment

Card's text content can be aligned to center by using .text-center class.

Example

Featured
Special title treatment

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

Go somewhere

Card with Nav Tabs

Check out the example to create a card with nav tabs.

Example

Special title treatment

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

Go somewhere

Card with Nav Pills

Check out the example to create a card with nav pills.

Example

Special title treatment

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

Go somewhere

Card with Image Caps

Similar to headers and footers, cards can include top and bottom 'image caps'—images at the top or bottom of a card.

Example

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

tiger

Card with Image overlays

Turn an image into a card background and overlay your card's text.

Example

tiger
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 Horizontal

Using a combination of grid and utility classes, we can create a responsive horizontal card.

tiger
Card title

Text goes here.

Last updated 3 mins ago

Card Background and color

Use .text-{color} and .bg-{color} to change the appearance of a card.

Example

Header
Primary card title

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

Header
Secondary card title

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

Header
Success card title

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

Header
Danger card title

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

Header
Warning card title

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

Header
Info card title

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

Header
Light card title

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

Header
Dark card title

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

Card with Borders

Use .border-{color} to change the border of a card.

Example

Header
Primary card title

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

Header
Secondary card title

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

Header
Success card title

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

Header
Danger card title

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

Header
Warning card title

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

Header
Info card title

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

Header
Light card title

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

Header
Dark card title

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

Card Groups

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

Example

tiger
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

leopard
Card title

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

Last updated 3 mins ago

jaguar
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

Card Group with Alignment

Just like with card groups (above example), card footers in decks will automatically line up.

Example

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

leopard
Card title

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

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

Card Decks

Create a set of equal width and height cards that aren’t attached to one another.

Example

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

leopard
Card title

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

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

Card Columns

Use .card-columns class to organize the cards into Masonry-like columns.

Example

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

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

Someone famous in Source Title
leopard
Card title

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

Last updated 3 mins ago

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

Someone famous in Source Title
Card title

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

Last updated 3 mins ago

jaguar

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

Someone famous in Source Title
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

Classes

The following table provides a list of all classes to create a card.

Class Explanation
.card Creates a card.
.card-img-top Place the image at the top inside a card.
.card-body Container for card content.
.card-title Adds a title to any heading element inside the card.
.card-text Adds text for card.
.card-subtitle The .card-subtitle is used after a .card-title, and adds the following to an element: margin-top: -.375rem; margin-bottom: 0;.
.card-header Adds header for card.
.card-link Adds a blue color to any link and a hover effect inside the card.
.card-footer Adds footer for card.
.card-header-tabs Styles navigation tabs inside the card header.
.card-header-pills Styles navigation pills inside the card header.
.card-img-overlay Turns an image into a card background. Often used to add text on top of the image.
.card-group Container to create a grid of cards that are of equal height and width, without side margins.
.card-deck Container to create a grid of cards that are of equal height and width, with side margins.
.card-columns To organize the cards into Masonry-like columns.

Share this Page

Meet the Author