diff options
| author | Mark Otto <[email protected]> | 2016-05-08 15:25:26 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-05-08 15:25:26 -0700 |
| commit | 4a064209ba26f53ed0758f232d0331beca7dfcd3 (patch) | |
| tree | 8b2d84d7518c4a6d39139ce0f81726133908847a /docs/components | |
| parent | b2dd8e16946c839b24ea1327c65732222e03c2d2 (diff) | |
| parent | b479efb9d639de1955d5aa4cfc4acd810352a6b2 (diff) | |
| download | bootstrap-4a064209ba26f53ed0758f232d0331beca7dfcd3.tar.xz bootstrap-4a064209ba26f53ed0758f232d0331beca7dfcd3.zip | |
Merge branch 'v4-dev' into v4-forms-cleanup
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/card.md | 12 |
1 files changed, 12 insertions, 0 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index b53d2e39a..14db8f962 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -51,6 +51,8 @@ Cards support a wide variety of content, including images, text, list groups, li </div> {% endexample %} +Lists can be added to a card by adding a list group. + {% example html %} <div class="card"> <ul class="list-group list-group-flush"> @@ -61,6 +63,8 @@ Cards support a wide variety of content, including images, text, list groups, li </div> {% endexample %} +`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags. + {% example html %} <div class="card"> <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap"> @@ -70,6 +74,8 @@ Cards support a wide variety of content, including images, text, list groups, li </div> {% endexample %} +Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to a `<a>` tag. + {% example html %} <div class="card card-block"> <h4 class="card-title">Card title</h4> @@ -79,6 +85,10 @@ Cards support a wide variety of content, including images, text, list groups, li </div> {% endexample %} +Subtitles are used by adding a `.card-subtitle` to an `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely. + +The multiple content types can be easily combined to create the card you need. See below for an example. + {% example html %} <div class="card"> <div class="card-block"> @@ -170,6 +180,8 @@ Add an optional header and/or footer within a card. </div> {% endexample %} +Card headers can be styled by adding `.card-header` to `<h*>` elements. + {% example html %} <div class="card"> <h3 class="card-header">Featured</h3> |