rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Document how to break equal width cols to multiple rows

Browse Source 
Fixes #21287
This commit is contained in:
Mark Otto 2016-12-27 14:05:24 -08:00 committed by Mark Otto
parent a34cdc0638
commit 069a80254f
1 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/layout/grid.md
View File

@ -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.