mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Move from h4s and misc to h5s so headings from example snippets don't show in our table of contents

Browse Source
This commit is contained in:
Mark Otto
2017-12-24 20:06:33 -08:00
committed by Mark Otto
parent 2416801c7e
commit 2435afe4e6
9 changed files with 52 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/4.0/components/card.md
+39 -39
View File
@@ -20,7 +20,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
</div>
@@ -52,7 +52,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
{% example html %}
<div class="card" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
<a href="#" class="card-link">Card link</a>
@@ -109,7 +109,7 @@ Mix and match multiple content types to create the card you need, or throw every
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
<ul class="list-group list-group-flush">
@@ -134,7 +134,7 @@ Add an optional header and/or footer within a card.
Featured
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<h5 class="card-title">Special title treatment</h5>
<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>
@@ -145,9 +145,9 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
{% example html %}
<div class="card">
<h4 class="card-header">Featured</h4>
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<h5 class="card-title">Special title treatment</h5>
<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>
@@ -174,7 +174,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
Featured
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<h5 class="card-title">Special title treatment</h5>
<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>
@@ -197,7 +197,7 @@ Using the grid, wrap cards in columns and rows as needed.
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<h5 class="card-title">Special title treatment</h5>
<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>
@@ -206,7 +206,7 @@ Using the grid, wrap cards in columns and rows as needed.
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<h5 class="card-title">Special title treatment</h5>
<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>
@@ -222,7 +222,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
{% example html %}
<div class="card w-75">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
</div>
@@ -230,7 +230,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
<div class="card w-50">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
</div>
@@ -244,7 +244,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
{% example html %}
<div class="card" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<h5 class="card-title">Special title treatment</h5>
<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>
@@ -258,7 +258,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
{% example html %}
<div class="card" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<h5 class="card-title">Special title treatment</h5>
<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>
@@ -266,7 +266,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<h5 class="card-title">Special title treatment</h5>
<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>
@@ -274,7 +274,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<h5 class="card-title">Special title treatment</h5>
<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>
@@ -301,7 +301,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<h5 class="card-title">Special title treatment</h5>
<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>
@@ -324,7 +324,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<h5 class="card-title">Special title treatment</h5>
<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>
@@ -343,14 +343,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
<div class="card mb-3">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
@@ -366,7 +366,7 @@ Turn an image into a card background and overlay your card's text. Depending on
<div class="card bg-dark text-white">
<img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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">Last updated 3 mins ago</p>
</div>
@@ -386,7 +386,7 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version
<div class="card{% unless color.name == "light" %} text-white{% endunless %} bg-{{ color.name }} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">{{ color.name | capitalize }} card title</h4>
<h5 class="card-title">{{ color.name | capitalize }} card title</h5>
<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>{% endfor %}
@@ -404,7 +404,7 @@ Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities
<div class="card border-{{ color.name }} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body{% unless color.name == "light" %} text-{{ color.name }}{% endunless %}">
<h4 class="card-title">{{ color.name | capitalize }} card title</h4>
<h5 class="card-title">{{ color.name | capitalize }} card title</h5>
<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>{% endfor %}
@@ -418,7 +418,7 @@ You can also change the borders on the card header and footer as needed, and eve
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h4 class="card-title">Success card title</h4>
<h5 class="card-title">Success card title</h5>
<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 class="card-footer bg-transparent border-success">Footer</div>
@@ -438,7 +438,7 @@ Use card groups to render cards as a single, attached element with equal width a
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
@@ -446,7 +446,7 @@ Use card groups to render cards as a single, attached element with equal width a
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
</div>
@@ -454,7 +454,7 @@ Use card groups to render cards as a single, attached element with equal width a
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
</div>
@@ -469,7 +469,7 @@ When using card groups with footers, their content will automatically line up.
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
<div class="card-footer">
@@ -479,7 +479,7 @@ When using card groups with footers, their content will automatically line up.
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
@@ -489,7 +489,7 @@ When using card groups with footers, their content will automatically line up.
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
<div class="card-footer">
@@ -508,7 +508,7 @@ Need a set of equal width and height cards that aren't attached to one another?
<div class="card">
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
</div>
@@ -516,7 +516,7 @@ Need a set of equal width and height cards that aren't attached to one another?
<div class="card">
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
</div>
@@ -524,7 +524,7 @@ Need a set of equal width and height cards that aren't attached to one another?
<div class="card">
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
</div>
@@ -539,7 +539,7 @@ Just like with card groups, card footers in decks will automatically line up.
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
<div class="card-footer">
@@ -549,7 +549,7 @@ Just like with card groups, card footers in decks will automatically line up.
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
@@ -559,7 +559,7 @@ Just like with card groups, card footers in decks will automatically line up.
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
<div class="card-footer">
@@ -580,7 +580,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
<div class="card">
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title that wraps to a new line</h4>
<h5 class="card-title">Card title that wraps to a new line</h5>
<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>
@@ -597,7 +597,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
<div class="card">
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
</div>
@@ -614,7 +614,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
</div>
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
</div>
@@ -634,7 +634,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h5 class="card-title">Card title</h5>
<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>
</div>