rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Add horizontal card example (#27906)

Browse Source
This commit is contained in:
Mark Otto 2018-12-23 05:00:51 -08:00 committed by XhmikosR
parent 3bd9fb3649
commit e4fe18e426
1 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
site/docs/4.2/components/card.md
View File

@ -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.