Skip to content

Instantly share code, notes, and snippets.

@kanakiyajay
Created December 1, 2014 05:04
Show Gist options
  • Save kanakiyajay/15e4fc98248956614643 to your computer and use it in GitHub Desktop.
Save kanakiyajay/15e4fc98248956614643 to your computer and use it in GitHub Desktop.
Seven Equal Columns in bootstrap.
@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%;
}
}
@media (min-width: 1200px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
}
}
<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>
@evasmythe
Copy link

when utilizing hubspot, where do you place this information?

@corbacode
Copy link

thanks, very uesful !

@mklahorst
Copy link

Perfect!

@Baso1st
Copy link

Baso1st commented Nov 15, 2017

for bootstrap 4 which uses flex you have to add
max-width: 14.285714285714285714285714285714% !important;
flex:none !important;

@thelucas15
Copy link

Thanks for Bootstrap 4 update!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment