How to Create Seven Equal Columns in Bootstrap?

Achieving 7 Equal Bootstrap Columns

In Bootstrap, creating columns is straightforward, but it's not always obvious how to achieve less common column configurations, such as seven equal columns.

Overriding Column Width with CSS Media Queries

To achieve seven equal columns, we need to override the default width of Bootstrap's columns using CSS media queries. Here's how:

1. Create a custom class, such as "seven-cols," for the row container.
2. Use CSS media queries to set the width of individual columns within that row container.

CSS Code:

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

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

Calculating Column Width:

The width is calculated using the formula:

width = 100% / 7 column-number

In this case, with seven columns:

width = 100% / 7 = 14.285714285714285714285714285714%

This means that each column should be set to 14.285714285714285714285714285714% of the parent row container.

HTML Markup:

<code class="html"><div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div></code>

Working Demo:

Check out the working demo on jsbin to see the seven equal columns in action:
https://jsbin.com/vuvut/3/edit?css,output

The above is the detailed content of How to Create Seven Equal Columns in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!