diff options
| author | Floris Verburg <[email protected]> | 2016-03-11 12:14:08 +0100 |
|---|---|---|
| committer | Floris Verburg <[email protected]> | 2016-03-11 12:14:08 +0100 |
| commit | 28f5c60419db57995c13bf9904bdd4fb535c0ec0 (patch) | |
| tree | 066e03336968cf9087c1f6d940d071c027485fe3 /docs | |
| parent | fcb41c7afddc60e65218eaa7d4c95a76bc22380d (diff) | |
| download | bootstrap-28f5c60419db57995c13bf9904bdd4fb535c0ec0.tar.xz bootstrap-28f5c60419db57995c13bf9904bdd4fb535c0ec0.zip | |
Added explicit commentary to .card-* classes
Diffstat (limited to 'docs')
| -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..47dfe950b 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 a `<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 easily be 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> |