### Dashboard

###### THIS MONTH

#### $58,356

###### LAST MONTH

#### $48,356

#### Card with Image

For the code click on above code icon

        <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="..." alt="Card image cap">
          <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>

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

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

Go somewhere

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

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

Go somewhere

#### Content types

The building block of a card is the `.card` `.card-body` Use it whenever you need a padded section within a card.

#### Special title treatment

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

#### Titles, text, and links

Card titles are used by adding `.card-title` & `.card-subtitle` for subtitle of 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.

Card link Another link

#### Header and footer

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

                                <div class="card">
                                  <div class="card-header">
                                    Featured
                                  </div>
                                  <div class="card-body">
                                    <h4 class="card-title">Special title treatment</h4>
                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                  </div>
                                </div>

Featured

#### Special title treatment

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

Go somewhere

#### Header and footer

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

                                <div class="card text-center">
                                  <div class="card-header">
                                    Featured
                                  </div>
                                  <div class="card-body">
                                    <h4 class="card-title">Special title treatment</h4>
                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                  </div>
                                  <div class="card-footer text-muted">
                                    2 days ago
                                  </div>
                                </div>

Featured

#### Special title treatment

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

Go somewhere

#### Size Using grid markup

Using the grid, wrap cards in columns and rows as needed.`.col-1 to .col-12`

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

#### Text alignment

You can quickly change the text alignment`.text-center .text-right`.

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

#### Special title treatment

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

Go somewhere

#### Using utilities

Using the utility, you can give direct width class to card like`.w-25, w-50, w-75, w-100`

### This card has width of 75%

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

Go somewhere

### This card has width of 50%

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

Go somewhere

#### Size Using grid markup

Using the grid, wrap cards in columns and rows as needed.`.col-1 to .col-12`

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

Cards include various options for customizing their backgrounds, borders, and color.`.card-primary info, warning, danger`

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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 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 card has supporting text below as a natural lead-in to additional content.

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 card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

#### Card With action

With action elements.

Title

#### Special title treatment

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

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

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

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

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

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

#### Card with Deck

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

#### 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 card has supporting text below as a natural.

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 card has even longer content than the first to show that equal height action. supporting text below as a natural lead-in to additional content

Last updated 3 mins ago

#### Card columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in `card-columns`

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

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

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

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