rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fuck around with card borders and more

Browse source
This commit is contained in:
Mark Otto 2016-01-17 18:55:24 -08:00
parent 94e27cdd6e
commit 955e0405ea
4 changed files with 125 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

83
docs/components/card.md
View file

@ -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.