diff options
| author | Mark Otto <[email protected]> | 2017-03-27 22:52:24 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2017-03-27 22:52:24 -0700 |
| commit | fe3acc097ac9def6569f471ef25d444020c30057 (patch) | |
| tree | 16f002d6ab8f3be49439bbfa08da6e4eed0b240f | |
| parent | 24924c23b24c1b196c42166ebe9a17d31f0ee720 (diff) | |
| download | bootstrap-fe3acc097ac9def6569f471ef25d444020c30057.tar.xz bootstrap-fe3acc097ac9def6569f471ef25d444020c30057.zip | |
Card image fixes (#22288)
* fix image stretching due to flexbox
* fix broke text-muted on dark bg
* no img-fluid needed
| -rw-r--r-- | docs/components/card.md | 8 | ||||
| -rw-r--r-- | scss/_card.scss | 12 |
2 files changed, 11 insertions, 9 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index dc8a921b8..74debae44 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -359,7 +359,7 @@ Turn an image into a card background and overlay your card's text. Depending on <div class="card-img-overlay"> <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> + <p class="card-text">Last updated 3 mins ago</p> </div> </div> {% endexample %} @@ -644,7 +644,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns {% example html %} <div class="card-columns"> <div class="card"> - <img class="card-img-top img-fluid" data-src="holder.js/100px160/" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap"> <div class="card-block"> <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> @@ -661,7 +661,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns </blockquote> </div> <div class="card"> - <img class="card-img-top img-fluid" data-src="holder.js/100px160/" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px160/" 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> @@ -686,7 +686,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns </div> </div> <div class="card"> - <img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image"> + <img class="card-img" data-src="holder.js/100px260/" alt="Card image"> </div> <div class="card p-3 text-right"> <blockquote class="card-blockquote"> diff --git a/scss/_card.scss b/scss/_card.scss index 9fe70e8cf..99f7c2195 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -158,10 +158,6 @@ } // Card image -.card-img { - // margin: -1.325rem; - @include border-radius($card-border-radius-inner); -} .card-img-overlay { position: absolute; top: 0; @@ -171,13 +167,19 @@ padding: $card-img-overlay-padding; } - +.card-img { + width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch + @include border-radius($card-border-radius-inner); +} // Card image caps .card-img-top { + width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-top-radius($card-border-radius-inner); } + .card-img-bottom { + width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-bottom-radius($card-border-radius-inner); } |