bootstrap 2.3 fluid row spacing - css

Question

I'm trying to create a row of divs (one per day of the week) that each contain a set of buttons for a user's availability for that time slot. However, no matter what I try I can't get the Bootstrap grid to space it evenly. Since there's seven days, I can't evenly divide the 12-space span, so each div is span1. However, in the Bootstrap docs they show this evenly filling the available space. In my example, it always crowds the divs to the left, so everything is cramped instead of taking up the available space.
I have a fiddle here: http://jsfiddle.net/usrwvreL/
Can someone point out the right way to use the grid / fluid row to space these items appropriately?

Answer 1

I find that an easy way to defeat the grid system when faced with this type of challenge is to take advantage of nested rows. Create three columns of size 4,
inside of which you could create three columns of four.
In the first parent column, you could have two child columns. The first child column would be offset using the .col-size-offset-4, which would then be proceeded by a .col-size-4.
The center parent column would have three child columns of size four, and the final parent column would have two child columns of size 4.
<!--This is the parent row-->
<div class="row">
<!--This is a parent column-->
<div class="col-md-4">
<!--Here is the gold. Create nested rows-->
<div class="row">
<!--Here we are offseting this column to produce a centered effect-->
<div class="col-md-offset-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<!--The middle parent column-->
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<!--The last parent column, farthest to the right
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>

Answer 2

Bootstrap uses a 12 box grid system so if you need to divide by seven you could add a custom grid division,
so you can make a selector like .col-seventh{width: calc (100% / 7)}
to extend that you can make a new grid type:
.col-seventh-1{width: 14.285714%;}
.col-seventh-2{width: 28.571428%;}
.col-seventh-3{width: 42.857142%;}
.col-seventh-4{width: 57.142857%;}
.col-seventh-5{width: 71.428571%;}
.col-seventh-6{width: 85.714285%;}
.col-seventh-7{width: 100%;}
Instead you could also use flexboxes css3 property layout (non-bootstrap) to do all this for you!!

Answer 3

I am just wondering it might be a good solution to put the date on an individual line. So that you would just have to align a btn-group with 6 btns.

Answer 4

Why don't you try changing the layout. For say you can show three time buttons per row. The date will be on the top most row but it could be aligned center and the other buttons with time could be in the center as well.

Answer 5

Why can't you put like this?
<div class="container-fluid">
<div class="span1 avail-buttons"><span class="avail-date text-center">2015-02-11</span>
<div class="button-row row-fluid">
<button data-slot="0" type="button" class="avail-button btn btn-danger">08:45 AM</button>
<button data-slot="1" type="button" class="avail-button btn btn-danger">09:15 AM</button>
<button data-slot="2" type="button" class="avail-button btn btn-danger">09:45 AM</button>
<button data-slot="3" type="button" class="avail-button btn btn-danger">10:15 AM</button>
<button data-slot="4" type="button" class="avail-button btn btn-danger">10:45 AM</button>
<button data-slot="5" type="button" class="avail-button btn btn-danger">11:15 AM</button>
</div> </div></div>