brand

Layout

Choose your preferred layout


Navigation

Menu comes in two modes: dark & light


Top Nav

Choose your liked color mode


Scrollable Header
brand brand

Cards

Card Content

Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, buttons, text styles, and a list group—all wrapped in a fixed-width card.

Card image cap
Card title
Card subtitle

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

Button
  • List group item one
  • List group item two
Header and Footer

Add an optional header and/or footer within a card. Card headers can also be styled by adding .card-header to heading elements.

Card Header
Special title treatment

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

Go somewhere
Card Header
Special title treatment

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

Go somewhere
Quote

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

Someone famous in Source Title
Image & Positions

.card-img-top places an image to the top of the card. Similarly use .card-img-bottom to align image to the bottom of the card.

Card image cap
Image top

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 bottom

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 image cap
Image Overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

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

Navigation

Add some navigation to a card’s header (or block) with Bootstrap’s nav components.

Card with Basic Nav

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

Go somewhere
Card with Nav Tabs

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

Go somewhere
Card with Nav Pills

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

Go somewhere
Card Groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

Card image cap
Card One

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 image cap
Card Two

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

Last updated 3 mins ago

Card image cap
Card Three

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

Cards Background

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.

Card Outline

Use border utilities to change just the border-color 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.

Card with action

Add as many actions in a card header. Add .card-header-action in .card-header. Given actions are for fullscreen, refresh, close, collapse and dropdown.

Special Title Treatment

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

Go somewhere
Special Title Treatment

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

Go somewhere
Card Header
Special Title Treatment

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

Go somewhere
Action in Card Body

Instead of card header you can also add close action inside card-body.

Special Title Treatment

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

Go somewhere
Card with shadow

Use shadow utilities to add shadow static & on hover to a card.

Special Title Treatment

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

Go somewhere
Card with table
Card with table
# Username Role
1 Brincker123 admin
2 Hay123 member
Card with icons
Card with icon

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

Card with badge
Card with badge
badge

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

Card with subheading
Card with icon sub heading

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

Card with Image Carousel

A card can have carousel within image parent.

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