How to Extend Bootstrap 3 Rows Beyond the 12-Column Limit?

Customizing Bootstrap 3 to Break the 12-Column Limit in Rows

Problem

By default, Bootstrap 3 forces columns greater than 12 units to stack vertically due to their "float: none" behavior. This limitation can hinder dynamic layouts where multiple content blocks may be added to a row.

Solution

To break this restriction, you can apply custom CSS overrides to override Bootstrap's behavior and allow rows to accommodate more than 12 columns. Here's how:

<code class="css">/* col-xs float fix for large column groups */
.large-group .col-xs-12 {
  float: left;
}

/* col-sm float fix for large column groups */
@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

/* col-md float fix for large column groups */
@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

/* col-lg float fix for large column groups */
@media (min-width: 1200px) {
  .large-group .col-lg-12 {
    float: left;
  }
}</code>

Implementation Example

<code class="html"><div class="container">
  <div class="row large-group" style="background-color:#ebebeb;">
    <div class="col-xs-9"><div style="background-color:#babeee;"><p>col 9</p></div></div>
    <div class="col-xs-3"><div style="background-color:#fefeeb;"><p>col 3</p></div></div>
    <div class="col-xs-12"><div style="background-color:#bada55;"><p>col 12</p></div></div>
  </div>
</div></code>

Rationalization

Although Bootstrap's default behavior ensures that rows remain visually consistent, it may not always be suitable for dynamic or space-constrained layouts. This customization enables greater flexibility and responsiveness in such situations.

The above is the detailed content of How to Extend Bootstrap 3 Rows Beyond the 12-Column Limit?. For more information, please follow other related articles on the PHP Chinese website!