```
### Header and Footer
--------
The structure of the card can be enhanced by the addition of a header and a footer. To add one of these elements, you have to create a `
` container with the `.card-header` or `.card-footer` class.
###### Code example:
```html
```
### Body
--------
The main container of Card is .card-body.
###### This is what it would look like in your HTML document
```html
This is some text within a card body.
```
###### Result
This is some text within a card body.
### Cards with Images
-----------
* You may also use specific classes for displaying images in cards.
* There are two classes for this purpose: card-img-top, which places an image on the top of the card, and card-img-bottom, which places the image on the bottom, both of them fitting them to the rounded border of the card neatly.
* These classes have to be used with the ```
``` tag inside a card to work properly.
* Keep in mind, that if you want an image to span the entire width, you would add the image container outside of the ```
``` container with the card-body class.
###### This is how it will look in an html doc
```html
Body content
Body content
```
### Cards Overlay
----
* For making an image into the background of the card and displaying the text on top of it you need to use the class card-img-overlay on the content, which you want to display over the image, instead of using the card-body class.
###### This is how it will look in an html doc
```html
Overlay content
```
### Card is balanced with the image
```html
Some quick example text to build on the card title and make up the bulk of the card's content.
```
#### More Information
- [Bootstrap cards](https://getbootstrap.com/docs/4.1/components/card/)