bootstrap 3.0 grid with less than 12 columns

Question

I am trying to create a calendar using the grid with only 7 columns. I would like to have these 7 columns evenly spaced and fit the entire row. Currently, the 7 columns does not add up to 12 and I get 12 columns with 5 empty. Is there a way in Bootstrap 3 to get all 7 spread across the row?

Answer 1

Your best bet is probably to create your own custom column class. Since you want a colum that spans 1/7th the width of it's parent, use width:14.285%; (100 divided by 7 = 14.285...).

DEMO: http://www.bootply.com/uakh14tkuX

CSS

.col-day{
    width:14.285%;
    border:1px solid grey;
    float:left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }

HTML

<div class="container">
  <div class="row bg-success">
    <div class="col-day">Sun</div>
    <div class="col-day">Mon</div>
    <div class="col-day">Tue</div>
    <div class="col-day">Wed</div>
    <div class="col-day">Th</div>
    <div class="col-day">Fr</div>
    <div class="col-day">Sat</div>
    <div class="col-day">Sun</div>
    <div class="col-day">Mon</div>
    <div class="col-day">Tue</div>
    <div class="col-day">Wed</div>
    <div class="col-day">Th</div>
    <div class="col-day">Fr</div>
    <div class="col-day">Sat</div>
  </div>
</div>

In the CSS section, float, position, min-height and the paddings are the same as any other bootstrap col-class. Width and border are the only truly custom aspects. But you'll also want to consider what happens on different sized devices - this solution is NOT responsive the way combined col-classes are...