<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<divclass="row">
<divclass="col-6 col-md-4">.col-6 .col-md-4</div>
<divclass="col-6 col-md-4">.col-6 .col-md-4</div>
<divclass="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<divclass="row">
<divclass="col-6 col-md-4">.col-6 .col-md-4</div>
<divclass="col-6 col-md-4">.col-6 .col-md-4</div>
<divclass="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<divclass="row">
<divclass="col-6">.col-6</div>
<divclass="col-6">.col-6</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<divclass="row">
<divclass="col-6">.col-6</div>
<divclass="col-6">.col-6</div>
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
...
...
@@ -326,14 +334,16 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
### Gutters
Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the `.row` and matching padding utilities on the `.col`s.
Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the `.row` and matching padding utilities on the `.col`s. The `.container` or `.container-fluid` parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.
Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoint and above. We've increased the `.col` padding with `.px-lg-5` and then counteracted that with `.mx-lg-n5` on the parent `.row`.
Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoint and above. We've increased the `.col` padding with `.px-lg-5`, counteracted that with `.mx-lg-n5` on the parent `.row` and then adjusted the `.container` wrapper with `.px-lg-5`.
