rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Rename .card-block to .card-body to match nomenclature of modals

Browse Source
This commit is contained in:
Mark Otto 2017-06-14 22:01:16 -07:00 committed by Mark Otto
parent e6303d4500
commit 6c8c0aa4cf
6 changed files with 67 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
docs/4.0/components/card.md
View File

@ -21,7 +21,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
{% example html %}
<div class="card" style="width: 20rem;">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
@ -35,11 +35,11 @@ Cards support a wide variety of content, including images, text, list groups, li
### Blocks
The building block of a card is the `.card-block`. Use it whenever you need a padded section within a card.
The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card.
{% example html %}
<div class="card">
<div class="card-block">
<div class="card-body">
This is some text within a card block.
</div>
</div>
@ -49,11 +49,11 @@ The building block of a card is the `.card-block`. Use it whenever you need a pa
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.
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.
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-body` item, the card title and subtitle are aligned nicely.
{% example html %}
<div class="card">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@ -70,7 +70,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
{% example html %}
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
@ -97,7 +97,7 @@ Mix and match multiple content types to create the card you need, or throw every
{% example html %}
<div class="card" style="width: 20rem;">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
@ -106,7 +106,7 @@ Mix and match multiple content types to create the card you need, or throw every
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-block">
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
@ -122,7 +122,7 @@ Add an optional header and/or footer within a card.
<div class="card-header">
Featured
</div>
<div class="card-block">
<div class="card-body">
<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>
@ -135,7 +135,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
{% example html %}
<div class="card">
<h3 class="card-header">Featured</h3>
<div class="card-block">
<div class="card-body">
<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>
@ -148,7 +148,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
<div class="card-header">
Quote
</div>
<div class="card-block">
<div class="card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@ -162,7 +162,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
<div class="card-header">
Featured
</div>
<div class="card-block">
<div class="card-body">
<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>
@ -185,7 +185,7 @@ Using the grid, wrap cards in columns and rows as needed.
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-block">
<div class="card-body">
<h3 class="card-title">Special title treatment</h3>
<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>
@ -194,7 +194,7 @@ Using the grid, wrap cards in columns and rows as needed.
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-block">
<div class="card-body">
<h3 class="card-title">Special title treatment</h3>
<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>
@ -210,7 +210,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
{% example html %}
<div class="card w-75">
<div class="card-block">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
@ -218,7 +218,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
</div>
<div class="card w-50">
<div class="card-block">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
@ -232,7 +232,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
{% example html %}
<div class="card" style="width: 20rem;">
<div class="card-block">
<div class="card-body">
<h3 class="card-title">Special title treatment</h3>
<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>
@ -246,7 +246,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
{% example html %}
<div class="card" style="width: 20rem;">
<div class="card-block">
<div class="card-body">
<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>
@ -254,7 +254,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
</div>
<div class="card text-center" style="width: 20rem;">
<div class="card-block">
<div class="card-body">
<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>
@ -262,7 +262,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
</div>
<div class="card text-right" style="width: 20rem;">
<div class="card-block">
<div class="card-body">
<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>
@ -289,7 +289,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
</li>
</ul>
</div>
<div class="card-block">
<div class="card-body">
<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>
@ -312,7 +312,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
</li>
</ul>
</div>
<div class="card-block">
<div class="card-body">
<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>
@ -331,14 +331,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
{% example html %}
<div class="card mb-3">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@ -375,7 +375,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
{% example html %}
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<div class="card-header">Header</div>
<div class="card-block">
<div class="card-body">
<h3 class="card-title">Special title treatment</h3>
<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>
@ -390,7 +390,7 @@ Cards include their own variant classes for quickly changing the `background-col
{% example html %}
<div class="card card-inverse card-primary mb-3 text-center">
<div class="card-block">
<div class="card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@ -398,7 +398,7 @@ Cards include their own variant classes for quickly changing the `background-col
</div>
</div>
<div class="card card-inverse card-success mb-3 text-center">
<div class="card-block">
<div class="card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@ -406,7 +406,7 @@ Cards include their own variant classes for quickly changing the `background-col
</div>
</div>
<div class="card card-inverse card-info mb-3 text-center">
<div class="card-block">
<div class="card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@ -414,7 +414,7 @@ Cards include their own variant classes for quickly changing the `background-col
</div>
</div>
<div class="card card-inverse card-warning mb-3 text-center">
<div class="card-block">
<div class="card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@ -422,7 +422,7 @@ Cards include their own variant classes for quickly changing the `background-col
</div>
</div>
<div class="card card-inverse card-danger text-center">
<div class="card-block">
<div class="card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@ -440,7 +440,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
{% example html %}
<div class="card card-outline-primary mb-3 text-center">
<div class="card-block">
<div class="card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@ -448,7 +448,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</div>
</div>
<div class="card card-outline-secondary mb-3 text-center">
<div class="card-block">
<div class="card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@ -456,7 +456,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</div>
</div>
<div class="card card-outline-success mb-3 text-center">
<div class="card-block">
<div class="card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@ -464,7 +464,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</div>
</div>
<div class="card card-outline-info mb-3 text-center">
<div class="card-block">
<div class="card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@ -472,7 +472,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</div>
</div>
<div class="card card-outline-warning mb-3 text-center">
<div class="card-block">
<div class="card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@ -480,7 +480,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</div>
</div>
<div class="card card-outline-danger text-center">
<div class="card-block">
<div class="card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@ -501,7 +501,7 @@ Use card groups to render cards as a single, attached element with equal width a
<div class="card-group">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@ -509,7 +509,7 @@ Use card groups to render cards as a single, attached element with equal width a
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@ -517,7 +517,7 @@ Use card groups to render cards as a single, attached element with equal width a
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@ -532,7 +532,7 @@ When using card groups with footers, their content will automatically line up.
<div class="card-group">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
@ -542,7 +542,7 @@ When using card groups with footers, their content will automatically line up.
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
@ -552,7 +552,7 @@ When using card groups with footers, their content will automatically line up.
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
@ -571,7 +571,7 @@ Need a set of equal width and height cards that aren't attached to one another?
<div class="card-deck">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@ -579,7 +579,7 @@ Need a set of equal width and height cards that aren't attached to one another?
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@ -587,7 +587,7 @@ Need a set of equal width and height cards that aren't attached to one another?
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@ -602,7 +602,7 @@ Just like with card groups, card footers in decks will automatically line up.
<div class="card-deck">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
@ -612,7 +612,7 @@ Just like with card groups, card footers in decks will automatically line up.
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
@ -622,7 +622,7 @@ Just like with card groups, card footers in decks will automatically line up.
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
@ -643,13 +643,13 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
<div class="card-columns">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="card-block card-blockquote">
<blockquote class="card-body card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
@ -660,7 +660,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@ -677,7 +677,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
</blockquote>
</div>
<div class="card text-center">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@ -697,7 +697,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
</blockquote>
</div>
<div class="card">
<div class="card-block">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

12
docs/4.0/components/collapse.md
View File

@ -26,7 +26,7 @@ You can use a link with the `href` attribute, or a button with the `data-target`
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
@ -46,14 +46,14 @@ Multiple `<button>` or `<a>` can show and hide an element if they each referenc
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-block">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-block">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
@ -77,7 +77,7 @@ Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-block">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
@ -91,7 +91,7 @@ Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-block">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
@ -105,7 +105,7 @@ Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-block">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>

2
docs/4.0/migration.md
View File

@ -199,7 +199,7 @@ Dropped entirely for the new card component.
- `.panel-group` removed and no replacement. `.card-group` is not a replacement, it is different.
- `.panel-heading` to `.card-header`
- `.panel-title` to `.card-title`. Depending on the desired look, you may also want to use [heading elements or classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/#headings) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
- `.panel-body` to `.card-block`
- `.panel-body` to `.card-body`
- `.panel-footer` to `.card-footer`
- `.panel-primary` to `.card-primary` and `.card-inverse` (or use `.bg-primary` on `.card-header`)
- `.panel-success` to `.card-success` and `.card-inverse` (or use `.bg-success` on `.card-header`)

6
js/tests/visual/collapse.html
View File

@ -21,7 +21,7 @@
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
@ -35,7 +35,7 @@
</h5>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
@ -49,7 +49,7 @@
</h5>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>

6
js/tests/visual/modal.html
View File

@ -65,7 +65,7 @@
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
@ -79,7 +79,7 @@
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
@ -93,7 +93,7 @@
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>

2
scss/_card.scss
View File

@ -13,7 +13,7 @@
@include border-radius($card-border-radius);
}
.card-block {
.card-body {
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto;