7 equal columns in bootstrap

Question

I was wondering if anyone could explain how I can get 7 equal columns in bootstrap? I am trying to make a calendar. This code seems to do 5:

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> 

My main content has the following class, so I would like the 7 columns to sit within this:

col-lg-12

Can anyone explain if this is possible, or if I have to stick to even numbers instead?

Answer 1

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.