Home >Web Front-end >CSS Tutorial >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:
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!