###### Navigation

Menu comes in two modes: dark & light

###### Top Nav

Choose your liked color mode

###### Scrollable Header

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

Card link Another link

##### 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 Footer
Card Header

##### Special title treatment

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

Go somewhere
Card Footer

##### Quote

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

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

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

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

- Active
- Link
- Disabled

##### Card with Basic Nav

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

Go somewhere

- Active
- Link
- Disabled

##### Card with Nav Tabs

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

Go somewhere

- Active
- Link
- Disabled

##### 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 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 Two

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

Last updated 3 mins ago

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

###### Card Header

Profile my balance Inbox Settings

##### Special Title Treatment

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

Go somewhere

###### Card Header

Action Another action Something else here
Separated link

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

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

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.