mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
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
|
// Accordion
|
||||||
//
|
//
|
||||||
|
|||||||
@ -841,10 +841,6 @@ $card-img-overlay-padding: 1.25rem !default;
|
|||||||
$card-group-margin: $grid-gutter-width / 2 !default;
|
$card-group-margin: $grid-gutter-width / 2 !default;
|
||||||
$card-deck-margin: $card-group-margin !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
|
// Tooltips
|
||||||
|
|
||||||
|
|||||||
@ -601,88 +601,6 @@ Just like with card groups, card footers in decks will automatically line up.
|
|||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
{{< /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.
|
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.
|
||||||
|
|
||||||
**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 >}}
|
|
||||||
|
|||||||
102
site/content/docs/4.3/examples/masonry/index.md
Normal file
102
site/content/docs/4.3/examples/masonry/index.md
Normal file
@ -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-pill` for the `.rounded-pill` utility class
|
||||||
- **Todo:** Removed badge's hover and focus styles for `a.badge` and `button.badge`.
|
- **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!)
|
### Icons (New!)
|
||||||
|
|
||||||
- Added new Bootstrap icons to the project for our documentation, form controls, and more.
|
- 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."
|
description: "Beautifully simple forms with floating labels over your inputs."
|
||||||
- name: Offcanvas
|
- name: Offcanvas
|
||||||
description: "Turn your expandable navbar into a sliding offcanvas menu."
|
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."
|
||||||
|
|||||||
BIN
site/static/docs/4.3/assets/img/examples/masonry.png
Executable file
BIN
site/static/docs/4.3/assets/img/examples/masonry.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
site/static/docs/4.3/assets/img/examples/masonry@2x.png
Executable file
BIN
site/static/docs/4.3/assets/img/examples/masonry@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Loading…
Reference in New Issue
Block a user