Remove card columns in favor of masonry grid
This commit is contained in:
Martijn Cuppens
XhmikosR
parent
3b73dfc44b
commit
b4c4223409
|
|
@ -241,29 +241,6 @@
|
|||
}
|
||||
|
||||
|
||||
//
|
||||
// Columns
|
||||
//
|
||||
|
||||
.card-columns {
|
||||
.card {
|
||||
margin-bottom: $card-columns-margin;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
column-count: $card-columns-count;
|
||||
column-gap: $card-columns-gap;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
.card {
|
||||
display: inline-block; // Don't let them vertically span multiple columns
|
||||
width: 100%; // Don't let their width change
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Accordion
|
||||
//
|
||||
|
|
|
|||
|
|
@ -841,10 +841,6 @@ $card-img-overlay-padding: 1.25rem !default;
|
|||
$card-group-margin: $grid-gutter-width / 2 !default;
|
||||
$card-deck-margin: $card-group-margin !default;
|
||||
|
||||
$card-columns-count: 3 !default;
|
||||
$card-columns-gap: 1.25rem !default;
|
||||
$card-columns-margin: $card-spacer-y !default;
|
||||
|
||||
|
||||
// Tooltips
|
||||
|
||||
|
|
|
|||
|
|
@ -601,88 +601,6 @@ Just like with card groups, card footers in decks will automatically line up.
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### Card columns
|
||||
### Card columns (Masonry layout)
|
||||
|
||||
Cards can be organized into [Masonry](https://masonry.desandro.com/)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
|
||||
|
||||
**Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet.
|
||||
|
||||
{{< example >}}
|
||||
<div class="card-columns">
|
||||
<div class="card">
|
||||
{{< placeholder width="100%" height="160" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title that wraps to a new line</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card p-3">
|
||||
<blockquote class="blockquote mb-0 card-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">
|
||||
<small class="text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card">
|
||||
{{< placeholder width="100%" height="160" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-primary text-white text-center p-3">
|
||||
<blockquote class="blockquote mb-0">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
|
||||
<footer class="blockquote-footer text-white">
|
||||
<small>
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
{{< placeholder width="100%" height="260" class="card-img" text="Card image" >}}
|
||||
</div>
|
||||
<div class="card p-3 text-right">
|
||||
<blockquote class="blockquote mb-0">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">
|
||||
<small class="text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.
|
||||
|
||||
{{< highlight scss >}}
|
||||
.card-columns {
|
||||
@include media-breakpoint-only(lg) {
|
||||
column-count: 4;
|
||||
}
|
||||
@include media-breakpoint-only(xl) {
|
||||
column-count: 5;
|
||||
}
|
||||
}
|
||||
{{< /highlight >}}
|
||||
In `v4` we used a CSS-only technique to mimic the behaviour of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,102 @@
|
|||
---
|
||||
layout: single
|
||||
title: Bootstrap grid masonry example
|
||||
description: This example illustrates how to integrate the [Masonry plugin](https://masonry.desandro.com/) with the Bootstrap grid. More options & documentation can be found on their [documentation site](https://masonry.desandro.com/).
|
||||
include_docs_stylesheets: true
|
||||
active_menu: "example"
|
||||
extra_js:
|
||||
- src: "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
|
||||
integrity: "sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI="
|
||||
async: true
|
||||
---
|
||||
|
||||
Masonry is not included in Bootstrap, but can easily be added by including your locally hosted file or using the following hosted javascript file:
|
||||
|
||||
```js
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI=" crossorigin="anonymous" async></script>
|
||||
```
|
||||
|
||||
By adding `data-masonry='{"percentPosition": true }'` to the `.row` wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.
|
||||
|
||||
{{< example >}}
|
||||
<div class="row" data-masonry='{"percentPosition": true }'>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card">
|
||||
{{< placeholder width="100%" height="160" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title that wraps to a new line</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-3">
|
||||
<blockquote class="blockquote mb-0 card-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">
|
||||
<small class="text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card">
|
||||
{{< placeholder width="100%" height="160" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card bg-primary text-white text-center p-3">
|
||||
<blockquote class="blockquote mb-0">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
|
||||
<footer class="blockquote-footer text-white">
|
||||
<small>
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card">
|
||||
{{< placeholder width="100%" height="260" class="card-img" text="Card image" >}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-3 text-right">
|
||||
<blockquote class="blockquote mb-0">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">
|
||||
<small class="text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
@ -93,6 +93,10 @@ Badges were overhauled to better differentiate themselves from buttons and to be
|
|||
- **Todo:** Removed `.badge-pill` for the `.rounded-pill` utility class
|
||||
- **Todo:** Removed badge's hover and focus styles for `a.badge` and `button.badge`.
|
||||
|
||||
### Cards
|
||||
|
||||
- Removed the card columns in favor of a Masonry grid [See #28922](https://github.com/twbs/bootstrap/pull/28922).
|
||||
|
||||
### Icons (New!)
|
||||
|
||||
- Added new Bootstrap icons to the project for our documentation, form controls, and more.
|
||||
|
|
|
|||
|
|
@ -51,3 +51,9 @@
|
|||
description: "Beautifully simple forms with floating labels over your inputs."
|
||||
- name: Offcanvas
|
||||
description: "Turn your expandable navbar into a sliding offcanvas menu."
|
||||
|
||||
- category: Integrations
|
||||
description: "Integrations with external libraries."
|
||||
examples:
|
||||
- name: "Masonry"
|
||||
description: "Combine the powers of the Bootstrap grid and the Masonry layout."
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Loading…
Reference in New Issue