How to Create a 7-Column Grid System in Bootstrap?

Obtaining 7 Equal Columns in Bootstrap

The Challenge

Achieving 7 equal columns in Bootstrap can be a challenge, given its default column system of 12 columns. The following code snippet demonstrates an attempt to create 5 equal columns using Bootstrap's built-in column classes:

<code class="html"><div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div></code>

However, this results in only 5 columns instead of the desired 7.

Customizing Column Widths

To overcome this limitation, it is necessary to override the default column widths using CSS3 @media queries. Customizing the width property of the columns based on the desired number of columns will achieve the desired effect.

Code Implementation

The following code demonstrates how to create a 7-column grid system in Bootstrap:

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

The seven-cols class is added to the outer row to distinguish it from a standard Bootstrap row.

Custom CSS is then used to determine the width of each column:

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

@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%;
  }
}

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

The width value of 14.285714285714285714285714285714% is obtained by dividing 100% by 7 (the number of columns) and multiplying by the column number (1 in this case). This calculation ensures that all columns have an equal width.

By combining custom CSS and the seven-cols class, you can create a flexible grid system with 7 equal columns that adapts to different screen sizes.

The above is the detailed content of How to Create a 7-Column Grid System in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!