diff options
| author | Mark Otto <[email protected]> | 2016-12-27 14:05:24 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-27 14:14:49 -0800 |
| commit | 069a80254f14add187691e82aed606bba7ffbcd4 (patch) | |
| tree | 1006a19865686e21e55528a613508addbf5c5baa | |
| parent | a34cdc063809ea903314cc5d7ee368a4e938b687 (diff) | |
| download | bootstrap-069a80254f14add187691e82aed606bba7ffbcd4.tar.xz bootstrap-069a80254f14add187691e82aed606bba7ffbcd4.zip | |
Document how to break equal width cols to multiple rows
Fixes #21287
| -rw-r--r-- | docs/layout/grid.md | 16 |
1 files changed, 16 insertions, 0 deletions
diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 6537f70a1..056561b27 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -230,6 +230,22 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the {% endexample %} </div> +### Equal-width multi-row + +Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{ site.baseurl }}/utilities/display-property/). + +<div class="bd-example-row"> +{% example html %} +<div class="row"> + <div class="col">col</div> + <div class="col">col</div> + <div class="w-100"></div> + <div class="col">col</div> + <div class="col">col</div> +</div> +{% endexample %} +</div> + ## Responsive classes Bootstrap's grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit. |