mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
Add horizontal card example (#27906)
This commit is contained in:
parent
3bd9fb3649
commit
e4fe18e426
@ -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.
|
||||
|
Loading…
x
Reference in New Issue
Block a user