Can Bootstrap Grid System Create 7 Equal Columns?

Bootstrap's Grid System with 7 Equal Columns

When working with Bootstrap, it can be challenging to create layouts with an uneven number of columns. The Bootstrap grid system typically adheres to even numbers, leaving many wondering if it's feasible to have 7 equal columns.

The answer lies in overriding the column widths using CSS3 @media queries. Here's how you can achieve it:

1. Declare the Container Class: Begin by creating a container class within which the 7 columns will reside. For example:

   <code class="html"><div class="container">
    ...
   </div></code>

2. Define the Row and Column Structure: Within the container, define a row and 7 columns with the desired class:

   <code class="html"><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></code>

3. Calculate Column Width: Determine the appropriate column width based on the number of columns (in this case, 7). The formula for width is:

   Width = 100% / Number of Columns

   So, for 7 columns, the width is 100% / 7 ≈ 14.2857%.

4. Override Column Width Using Media Queries: To override the default column width, use CSS media queries to target the specific breakpoints. For instance:

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

By including these media queries, you can ensure the column widths adjust based on the screen size.

Working Demo:

Visit this online demo to see the 7 equal columns in action:
[Link to Demo]

The above is the detailed content of Can Bootstrap Grid System Create 7 Equal Columns?. For more information, please follow other related articles on the PHP Chinese website!