mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

First pass at .row-cols classes

Browse Source 
Trying to find a new way to do responsive card decks while not locking ourselves into the cards themselves. My thinking here is we can easily control the column (.col) width by the parent, but I don't know how many we need (have 0-5 now) across each breakpoint. This works for cards so far, and I think could get us equal height, too.
This commit is contained in:
Mark Otto
2019-07-18 02:27:53 +03:00
committed by Mark Otto
parent 4041d70eb5
commit e2252e0230
3 changed files with 144 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/4.3/layout/grid.md
+45
View File
@@ -324,6 +324,51 @@ Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoi
</div>
{{< /example >}}
### Row columns
Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a shortcut.
Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
<div class="bd-example-row">
{{< example >}}
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
{{< /example >}}
</div>
<div class="bd-example-row">
{{< example >}}
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
{{< /example >}}
</div>
<div class="bd-example-row">
{{< example >}}
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
{{< /example >}}
</div>
## Alignment
Use flexbox alignment utilities to vertically and horizontally align columns. **Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a `min-height` as shown below.** [See Flexbugs #3 for more details.](https://github.com/philipwalton/flexbugs#flexbug-3)