mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 00:54:04 +02:00
Code Issues Releases Wiki Activity

rewrite much of cards and the docs

Browse Source
This commit is contained in:
Mark Otto
2015-05-28 14:07:34 -07:00
parent e07cebc90e
commit 74d17ab7a0
3 changed files with 320 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
docs/components/card.md
View File

@@ -7,56 +7,96 @@ A **card** is a flexible and extensible content container. It includes options f
If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
## Basic example ## Example
Cards require very little markup, but do require some additional classes to give you as much control as possible. Create a `.card`, add any heading with `.card-title`, and use `.card-text` on paragraphs. These classes ensure proper spacing and alignment. Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease.
{% example html %} {% example html %}
<div class="card"> <div class="card">
<h3 class="card-title">Special title treatment</h3> <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <div class="card-block">
<a href="#" class="btn btn-primary">Go somewhere</a> <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">Button</a>
</div>
</div>
{% endexample %}
## Content types
Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.
{% example html %}
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap">
<div class="card-block">
<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>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-block">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
{% endexample %}
{% example html %}
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap">
<div class="card-block">
<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>
{% endexample %}
{% example html %}
<div class="card">
<div class="card-block">
<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="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
{% endexample %}
{% example html %}
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img data-src="holder.js/100%x180/?text=Image" alt="Card image">
<div class="card-block">
<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>
<a href="#" class="card-link">Another link</a>
</div>
</div> </div>
{% endexample %} {% endexample %}
## Sizing ## Sizing
Cards are block-level by default, so they'll fill the available horizontal space. Constrain their widths via custom styles, our predefined grid classes, or our grid mixins. Cards are block-level by default, so they'll fill the available horizontal space. Constrain their widths via inline styles, our predefined grid classes, or with custom styles using our grid mixins.
Using the card size variations:
{% example html %}
<div class="card card-sm">
<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>
</div>
<div class="card card-md">
<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>
</div>
<div class="card card-lg">
<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>
</div>
{% endexample %}
Using the grid: Using the grid:
{% example html %} {% example html %}
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="card"> <div class="card card-block">
<h3 class="card-title">Special title treatment</h3> <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> <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> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<div class="card"> <div class="card card-block">
<h3 class="card-title">Special title treatment</h3> <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> <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> <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -68,7 +108,7 @@ Using the grid:
Using custom widths: Using custom widths:
{% example html %} {% example html %}
<div class="card" style="width: 20rem;"> <div class="card card-block" style="width: 20rem;">
<h3 class="card-title">Special title treatment</h3> <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> <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> <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -80,19 +120,19 @@ Using custom widths:
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes](). You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]().
{% example html %} {% example html %}
<div class="card"> <div class="card card-block">
<h4 class="card-title">Special title treatment</h4> <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> <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> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
<div class="card text-center"> <div class="card card-block text-center">
<h4 class="card-title">Special title treatment</h4> <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> <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> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
<div class="card text-right"> <div class="card card-block text-right">
<h4 class="card-title">Special title treatment</h4> <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> <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> <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -108,19 +148,23 @@ Add an optional header and/or footer within a card.
<div class="card-header"> <div class="card-header">
Featured Featured
</div> </div>
<h4 class="card-title">Special title treatment</h4> <div class="card-block">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <h4 class="card-title">Special title treatment</h4>
<a href="#" class="btn btn-primary">Go somewhere</a> <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> </div>
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
Quote Quote
</div> </div>
<blockquote class="card-blockquote"> <div class="card-block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <blockquote class="card-blockquote">
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div> </div>
{% endexample %} {% endexample %}
@@ -129,9 +173,11 @@ Add an optional header and/or footer within a card.
<div class="card-header"> <div class="card-header">
Featured Featured
</div> </div>
<h4 class="card-title">Special title treatment</h4> <div class="card-block">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <h4 class="card-title">Special title treatment</h4>
<a href="#" class="btn btn-primary">Go somewhere</a> <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 class="card-footer text-muted"> <div class="card-footer text-muted">
2 days ago 2 days ago
</div> </div>
@@ -141,10 +187,12 @@ Add an optional header and/or footer within a card.
<div class="card-header"> <div class="card-header">
Quote Quote
</div> </div>
<blockquote class="card-blockquote"> <div class="card-block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <blockquote class="card-blockquote">
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
<div class="card-footer text-muted"> <div class="card-footer text-muted">
2 days ago 2 days ago
</div> </div>
@@ -157,16 +205,20 @@ Similar to headers and footers, cards include top and bottom image caps.
{% example html %} {% example html %}
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/240x180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
<h4 class="card-title">Card title</h4> <div class="card-block">
<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> <h4 class="card-title">Card title</h4>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <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>
<div class="card"> <div class="card">
<h4 class="card-title">Card title</h4> <div class="card-block">
<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> <h4 class="card-title">Card title</h4>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <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>
<img class="card-img-bottom" data-src="holder.js/240x180/" alt="Card image cap"> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img class="card-img-bottom" data-src="holder.js/100%x180/" alt="Card image cap">
</div> </div>
{% endexample %} {% endexample %}
@@ -191,9 +243,11 @@ Cards include a class for quickly toggling the text color. By default, cards use
{% example html %} {% example html %}
<div class="card card-inverse" style="background-color: #333; border-color: #333;"> <div class="card card-inverse" style="background-color: #333; border-color: #333;">
<h3 class="card-title">Special title treatment</h3> <div class="card-block">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <h3 class="card-title">Special title treatment</h3>
<a href="#" class="btn btn-primary">Go somewhere</a> <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>
</div> </div>
{% endexample %} {% endexample %}
@@ -203,34 +257,44 @@ Cards include their own variant classes for quickly changing the `background-col
{% example html %} {% example html %}
<div class="card card-inverse card-primary text-center"> <div class="card card-inverse card-primary text-center">
<blockquote class="card-blockquote"> <div class="card-block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <blockquote class="card-blockquote">
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div> </div>
<div class="card card-inverse card-success text-center"> <div class="card card-inverse card-success text-center">
<blockquote class="card-blockquote"> <div class="card-block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <blockquote class="card-blockquote">
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div> </div>
<div class="card card-inverse card-info text-center"> <div class="card card-inverse card-info text-center">
<blockquote class="card-blockquote"> <div class="card-block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <blockquote class="card-blockquote">
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div> </div>
<div class="card card-inverse card-warning text-center"> <div class="card card-inverse card-warning text-center">
<blockquote class="card-blockquote"> <div class="card-block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <blockquote class="card-blockquote">
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div> </div>
<div class="card card-inverse card-danger text-center"> <div class="card card-inverse card-danger text-center">
<blockquote class="card-blockquote"> <div class="card-block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <blockquote class="card-blockquote">
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div> </div>
{% endexample %} {% endexample %}
@@ -241,47 +305,24 @@ Set a `width` on the `.card-group`, content automatically sizes for equal column
{% example html %} {% example html %}
<div class="card-group"> <div class="card-group">
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
<h4 class="card-title">Card title</h4> <div class="card-block">
<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 class="card">
<img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
<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>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
<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>
</div>
</div>
{% endexample %}
## Sets
Get equal-width and equal-height cards by using two wrappers: `.card-set-wrapper` and a `.card-set`. We use table styles for the sizing and the gutters on `.card-set`. The `.card-set-wrapper` is used to negative margin out the `border-spacing` on the `.card-set`.
{% example html %}
<div class="card-set-wrapper">
<div class="card-set">
<div class="card">
<img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
<h4 class="card-title">Card title</h4> <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">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> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
<div class="card"> </div>
<img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap"> <div class="card">
<img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4> <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">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> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
<div class="card"> </div>
<img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap"> <div class="card">
<img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4> <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">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> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@@ -290,6 +331,41 @@ Get equal-width and equal-height cards by using two wrappers: `.card-set-wrapper
</div> </div>
{% endexample %} {% endexample %}
## Decks
Get equal-width and equal-height cards by using two wrappers: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.
{% example html %}
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
<div class="card-block">
<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>
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
<div class="card-block">
<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>
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
<div class="card-block">
<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>
</div>
</div>
</div>
</div>
{% endexample %}
## Columns ## Columns
Cards can be organized into columns by wrapping a group with `.card-columns`. Cards can be organized into columns by wrapping a group with `.card-columns`.

170
scss/_card.scss
View File

@@ -2,28 +2,68 @@
// Base styles // Base styles
// //
$card-spacer-x: 1.25rem;
$card-spacer-y: .75rem;
$card-border-width: .0625rem;
$card-border-radius: .25rem;
.card { .card {
position: relative; position: relative;
padding: 1.25rem; margin-bottom: $card-spacer-y;
margin-bottom: 1.25rem; border: $card-border-width solid #e5e5e5;
border: .075rem solid #eee; @include border-radius($card-border-radius);
} }
.card-block {
padding: $card-spacer-x;
}
.card-title { .card-title {
margin-top: 0; margin-top: 0;
margin-bottom: .75rem; margin-bottom: $card-spacer-y;
} }
.card-subtitle {
margin-top: -($card-spacer-y / 2);
margin-bottom: 0;
}
.card-text:last-child { .card-text:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.card-actions {
.card-link + .card-link { // .card-actions {
margin-left: .75rem; // padding: $card-spacer-y $card-spacer-x;
}
} // .card-link + .card-link {
// margin-left: $card-spacer-x;
// }
// }
.card-link { .card-link {
@include hover { @include hover {
text-decoration: none; text-decoration: none;
} }
+ .card-link {
margin-left: $card-spacer-x;
}
}
@if $enable-rounded {
.card {
> .list-group:first-child {
.list-group-item:first-child {
border-radius: $card-border-radius $card-border-radius 0 0;
}
}
> .list-group:last-child {
.list-group-item:last-child {
border-radius: 0 0 $card-border-radius $card-border-radius;
}
}
}
} }
@@ -32,33 +72,21 @@
// //
.card-header { .card-header {
padding: .75rem 1.25rem; padding: $card-spacer-y $card-spacer-x;
margin: -1.25rem -1.25rem 1.25rem; border-bottom: $card-border-width solid #eee;
border-bottom: .075rem solid #eee;
@include border-radius(.25rem .25rem 0 0); &:first-child {
@include border-radius($card-border-radius $card-border-radius 0 0);
}
} }
.card-footer { .card-footer {
padding: .75rem 1.25rem; padding: $card-spacer-y $card-spacer-x;
margin: 1.25rem -1.25rem -1.25rem; border-top: $card-border-width solid #eee;
border-top: .075rem solid #eee;
@include border-radius(0 0 .25rem .25rem);
}
&:last-child {
// @include border-radius(0 0 $card-border-radius $card-border-radius);
// Sizing variations }
//
.card-sm {
width: 15rem;
}
.card-md {
width: 30rem;
}
.card-lg {
width: 45rem;
} }
@@ -128,7 +156,7 @@
// Card image // Card image
.card-img { .card-img {
margin: -1.325rem; // margin: -1.325rem;
@include border-radius(.25rem); @include border-radius(.25rem);
} }
.card-img-overlay { .card-img-overlay {
@@ -144,11 +172,9 @@
// Card image caps // Card image caps
.card-img-top { .card-img-top {
margin: -1.325rem -1.325rem 1.25rem;
@include border-radius(.25rem .25rem 0 0); @include border-radius(.25rem .25rem 0 0);
} }
.card-img-bottom { .card-img-bottom {
margin: 1.25rem -1.325rem -1.325rem;
@include border-radius(0 0 .25rem .25rem); @include border-radius(0 0 .25rem .25rem);
} }
@@ -157,22 +183,36 @@
// Card set // Card set
// //
.card-set { @if $enable-flex {
display: table; .card-deck {
table-layout: fixed; display: flex;
border-spacing: 1.25rem 0; flex-flow: row wrap;
margin-right: -.75rem;
margin-left: -.75rem;
.card { .card {
display: table-cell; flex: 1 0 0;
float: none; margin-left: .75rem;
max-width: none; margin-right: .75rem;
}
}
} @else {
.card-deck {
display: table;
table-layout: fixed;
border-spacing: 1.25rem 0;
.card {
display: table-cell;
float: none;
max-width: none;
}
}
.card-deck-wrapper {
margin-right: -1.25rem;
margin-left: -1.25rem;
} }
} }
.card-set-wrapper {
margin-right: -1.25rem;
margin-left: -1.25rem;
}
// //
// Card groups // Card groups
@@ -199,6 +239,38 @@
margin-left: 0; margin-left: 0;
border-left: 0; border-left: 0;
} }
// Handle rounded corners
&:first-child {
.card-img-top {
@if $enable-rounded {
border-top-right-radius: 0;
}
}
.card-img-bottom {
@if $enable-rounded {
border-bottom-right-radius: 0;
}
}
}
&:last-child {
.card-img-top {
@if $enable-rounded {
border-top-left-radius: 0;
}
}
.card-img-bottom {
@if $enable-rounded {
border-bottom-left-radius: 0;
}
}
}
&:not(:first-child):not(:last-child) {
.card-img-top,
.card-img-bottom {
@include border-radius(0);
}
}
} }
} }

15
scss/_list-group.scss
View File

@@ -10,7 +10,7 @@
.list-group { .list-group {
// No need to set list-style: none; since .list-group-item is block level // No need to set list-style: none; since .list-group-item is block level
padding-left: 0; // reset padding because ul and ol padding-left: 0; // reset padding because ul and ol
margin-bottom: 20px; margin-bottom: 0;
} }
@@ -21,11 +21,11 @@
.list-group-item { .list-group-item {
position: relative; position: relative;
display: block; display: block;
padding: 10px 15px; padding: .75rem 1.25rem;
// Place the border on the list items and negative margin up for better styling // Place the border on the list items and negative margin up for better styling
margin-bottom: -1px; margin-bottom: -.0625rem;
background-color: $list-group-bg; background-color: $list-group-bg;
border: 1px solid $list-group-border; border: .0625rem solid $list-group-border;
// Round the first and last items // Round the first and last items
&:first-child { &:first-child {
@@ -37,6 +37,13 @@
} }
} }
.list-group-flush {
.list-group-item {
border-width: .0625rem 0;
border-radius: 0;
}
}
// Linked list items // Linked list items
// //