{% set title = 'Bootstrap Components › Card' %} {% set page = 'bootstrap-card.html' %} {% extends 'layouts/master.html' %} {% block plugins_css %} {% endblock %} {% block content %}

# Card

## Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

#### Card Title

This is some text within a card body.

#### Card Action Button

This is some text within a card body.

#### Card Title

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

Card link Another link

#### Footer `bg-whitesmoke`

This is some text within a card body.

## Card Variants

Basically, the Bootstrap card can be given a color variant.

#### Card Header

Card `.card-primary`

#### Card Header

Card `.card-secondary`

#### Card Header

Card `.card-danger`

#### Card Header

Card `.card-warning`

#### Card Header

Card `.card-info`

#### Card Header

Card `.card-success`

#### Card Header

Card `.card-light`

#### Card Header

Card `.card-dark`

## Card Button & Input

Also, you can give a button or input on the card header.

#### Card Header

View All

Write something here

#### Button Group

Home Profile Setting

Write something here

#### Input Text

Write something here

#### Card Header

View All Delete All

Write something here

#### Dropdown Button

View All
Options

Write something here

#### Input Button

Write something here

## Functionality Card

You can provide functionality on the card.

#### Show/Hide

You can show or hide this card.

#### My Picture

View All
Click the picture below to see the magic!

#### Dismiss

You can dimiss this card.

#### Login

Click login to change the card to progress mode.

Username
Password
Remember Me

## Sortable Card

Other cool cards, this one can be sorted.

#### Card Header

Card `.card-primary`

#### Card Header

Card `.card-secondary`

#### Card Header

Card `.card-danger`

#### Card Header

Card `.card-warning`

{% endblock %} {% block plugins_js %}
{% endblock %}