Can You Create a 7-Column Layout with Bootstrap?

Is It Possible to Create 7 Equal Columns Using Bootstrap?

When working with Bootstrap, it's common to create even-numbered columns for a balanced layout. However, you may encounter situations where you need an odd number of columns, such as 7.

Overriding Column Width with CSS

While Bootstrap doesn't natively provide a 7-column system, it's possible to achieve this by overriding the width of the columns using CSS.

<code class="css">@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}</code>

This media query sets the width of all columns with the class col-md-1 (as well as col-sm-1 and col-lg-1;) to 14.285714285714285714285714285714% for medium-sized screens or larger. This ensures equal column distribution.

Using a Parent Class

To contain the 7 columns, you'll need a parent element with the class seven-cols to apply the overrides.

<code class="html"><div class="container">
  <div class="row seven-cols">
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
  </div>
</div></code>

Conclusion

By overriding the column widths using CSS and utilizing a parent element, you can create a 7-column layout using Bootstrap. Remember that this approach requires additional CSS, and it's always preferable to adhere to the native Bootstrap grid system when possible.

The above is the detailed content of Can You Create a 7-Column Layout with Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!