diff options
| author | Mark Otto <otto@github.com> | 2018-12-23 16:00:51 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2018-12-23 16:00:51 +0300 |
| commit | e4fe18e4261268df290098dea8439d4aa3496ad7 (patch) | |
| tree | 3d70d3df6f1c42baa9baa81178d8088a086310c5 /site | |
| parent | 3bd9fb3649a233f0a0c26b8a6cb5209d220a7528 (diff) | |
Add horizontal card example (#27906)
Diffstat (limited to 'site')
| -rw-r--r-- | site/docs/4.2/components/card.md | 22 |
1 files changed, 22 insertions, 0 deletions
diff --git a/site/docs/4.2/components/card.md b/site/docs/4.2/components/card.md index 221c9da54a..fa9c6ffc15 100644 --- a/site/docs/4.2/components/card.md +++ b/site/docs/4.2/components/card.md @@ -397,6 +397,28 @@ Note that content should not be larger than the height of the image. If content {% endcapture %} {% include callout.html content=callout type="info" %} +## Horizontal + +Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.no-gutters` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content. + +{% capture example %} +<div class="card mb-3" style="max-width: 540px;"> + <div class="row no-gutters"> + <div class="col-md-4"> + {% include icons/placeholder.svg width="100%" height="250" class="" text="Image" %} + </div> + <div class="col-md-8"> + <div class="card-body"> + <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> +</div> +{% endcapture %} +{% include example.html content=example %} + ## Card styles Cards include various options for customizing their backgrounds, borders, and color. |