diff options
| author | Mark Otto <[email protected]> | 2016-01-17 18:55:24 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-01-17 18:55:24 -0800 |
| commit | 955e0405ea04e8bce3fa8395cd5e1c4030c4947a (patch) | |
| tree | 87aa7b877480fbfd368f955feaedec3dbe4ca547 /docs/components | |
| parent | 94e27cdd6e51373cd014df0a6776ace0d83cfb55 (diff) | |
| download | bootstrap-955e0405ea04e8bce3fa8395cd5e1c4030c4947a.tar.xz bootstrap-955e0405ea04e8bce3fa8395cd5e1c4030c4947a.zip | |
fuck around with card borders and more
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/card.md | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index 159fa42be..28db0e3fa 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -211,6 +211,89 @@ Add an optional header and/or footer within a card. </div> {% endexample %} +## Heading nav + +- Custom card nav (full width) +- Tabs +- Pills +- Alignment: + - left + - center + - right + +{% example html %} +<div class="card text-xs-center"> + <div class="card-header"> + <ul class="nav card-nav"> + <li class="nav-item"> + <a class="nav-link active" href="#">Active</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> + </ul> + </div> + <div class="card-block"> + <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> +{% endexample %} + + + +Or, use Bootstrap's nav pills or tabs to a card header. Be sure to always include a `.pull-*-*` utility class for proper alignment. + +{% example html %} +<div class="card text-xs-center"> + <div class="card-header"> + <ul class="nav nav-tabs card-header-tabs pull-xs-left"> + <li class="nav-item"> + <a class="nav-link active" href="#">Active</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> + </ul> + </div> + <div class="card-block"> + <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> +{% endexample %} + +{% example html %} +<div class="card text-xs-center"> + <div class="card-header"> + <ul class="nav nav-pills card-header-pills pull-xs-left"> + <li class="nav-item"> + <a class="nav-link active" href="#">Active</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> + </ul> + </div> + <div class="card-block"> + <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> +{% endexample %} + ## Image caps Similar to headers and footers, cards include top and bottom image caps. |