diff options
| -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 221c9da54..fa9c6ffc1 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. |