Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add horizontal card example #27906

Merged
merged 2 commits into from Dec 23, 2018
Merged

Add horizontal card example #27906

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5070d44
Add horizontal card example
mdo Dec 22, 2018
bf4fcba
Merge branch 'v4-dev' into horizontal-card-example
XhmikosR Dec 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 22 additions & 0 deletions site/docs/4.2/components/card.md
View file
Open in desktop
Expand Up @@ -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.
Expand Down