``` element. Add the ```.card-body``` class to apply padding. To apply the default style, add the ```.card-default``` class. The title of the card must be contained in an element with the ```.card-title``` class.

Simple card

Nulla sapien enim, egestas nec nibh vitae, suscipit bibendum purus.

```html

Simple card

Nulla sapien enim, egestas nec nibh vitae, suscipit bibendum purus.

``` ----------- ## Shapes Default style applies a slightly rounded card border style. You can apply two other card shape styles. | Class | Description | | ------ | ------- | | ```.card-squared``` | Applies a square border style. | | ```.card-rounded``` | Applies a rounded border style. |

Squared card

Nulla sapien enim, egestas nec nibh vitae, suscipit bibendum purus.

Rounded card

Nulla sapien enim, egestas nec nibh vitae, suscipit bibendum purus.

```html

Squared card

Nulla sapien enim, egestas nec nibh vitae, suscipit bibendum purus.

Rounded card

Nulla sapien enim, egestas nec nibh vitae, suscipit bibendum purus.

``` ----------- ## Sizes You can apply two other card sizes. | Class | Description | | ------ | ------- | | ```.card-small``` | Applies a small card size. | | ```.card-large``` | Applies a large card size. |

Small card

Nulla sapien enim, egestas nec nibh vitae, suscipit bibendum purus.

Large card

Nulla sapien enim, egestas nec nibh vitae, suscipit bibendum purus.

```html

Small card

Nulla sapien enim, egestas nec nibh vitae, suscipit bibendum purus.

Large card

Nulla sapien enim, egestas nec nibh vitae, suscipit bibendum purus.

``` ----------- ## Header and footer To create a card header, create a ```

``` element inside and add the ```.card-header``` class. You can include the title of the card and a description with the ```.text-meta``` element for example. To create a card footer, create a ```

``` element and add the ```.card-footer``` class. This element is useful to include links in the card for example.

Header

A short description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Link

```html

Header

A short description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Link

``` ----------- ## Media card To create a media card, create a ```

``` element inside and add the ```.card-media``` class. Insert an image inside with the `````` tag.

Card Media

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Card Media

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

```html

Card Media

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

``` ```html

Card Media

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

``` ----------- ### Horizontal media card To create a horizontal media card, start by adding the ```.card-horizontal``` class to the ```.card``` element. Inside the card, create a ```

``` element with the ```.card-media``` class. Add the ```.card-media-right``` class if you place the media on the right or the ```.card-media-left``` class if you place the media on the left. !!!Note You can include a media with the img tag if you wish. However, it is recommended to use the CSS ```background-image``` attribute on the ```.card-media``` element for a better rendering. In this case, add the ```.hide``` class to the img element so that it is hidden from users while remaining visible to search engines. You can adjust the width of content and media with the ```.width-*``` class (see the [Utility components](utility.md#width)).

Card Media Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Card Media Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

```html

Card Media Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Card Media Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

``` -----------