7 equal columns in bootstrap
Upgrading to Bootstrap 4 is probably a good option.
Comes with a class col for equal width columns
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
https://v4-alpha.getbootstrap.com/layout/grid/#equal-width
Tips: If you want to break columns in new lines when screen is lower than md, add this div after each column:
<div class='w-100 d-md-none'></div>
.w-100 breaks to a new line and .d-md-done hides the div on screens wider than md
So it would give:
<div class="row">
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
</div>
An almost equal, quick solution. Without custom css.
.cell {
border: 1px solid black;
text-align: center;
flex-basis: 33.3333%;
flex-grow: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-webkit-tap-highlight-color: #0000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4"></div> <!-- this column empty -->
<div class="col-md-4 cell"> 1 </div>
<div class="col-md-4 cell"> 2 </div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-2 cell"> 3 </div>
<div class="col-md-2 cell"> 4 </div>
<div class="col-md-2 cell"> 5 </div>
<div class="col-md-2 cell"> 6 </div>
<div class="col-md-2 cell"> 7 </div>
<div class="col-md-2"></div> <!-- this column empty -->
</div>
</div>
</div>
Well, IMO you probably need to override the width
of the columns by using CSS3 @media
query.
Here is my attempt to create a 7-col grid system:
<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>
@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%;
}
}
/**
* The following is not really needed in this case
* Only to demonstrate the usage of @media for large screens
*/
@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%;
}
}
The value of width
comes from:
width = 100% / 7 column-number = 14.285714285714285714285714285714%
WORKING DEMO - (jsbin)
Run the code snippet and click on the "Full page".
.col-md-1 {
background-color: gold;
}
@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%;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<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>
Other options
Also, you could build your own 7-columns version of Twitter Bootstrap by using the Custom Builder (Changing the @grid-columns
, ...).
If you are using less compiler, you could download the less version of Twitter Bootstrap (from Github) and edit the variables.less
file instead.