Bootstrap 3.0 with less than 12 columns

Question

I am trying to create a calendar using a 7-column grid. I would like these 7 columns to be evenly distributed and fit the entire row. Currently 7 columns do not contain up to 12, and I get 12 columns with 5 empty. Is there a way in Bootstrap 3 to get all 7 scattered across a line?

Answer 1

It is best to create your own column class. Since you need a columbus that occupies the 1 / 7th width of its 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 paddings are the same as any other col bootstrap class. Width and border are the only truly individual aspects. But you also want to consider what happens on devices of various sizes - this solution does NOT respond to how the combined col ...

Answer 2

Short answer: it really can not be?

From the grid description:

 Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport. 

The number 12 was chosen because of its high versatility (you can have: 1,2,3,4,6 or 12 columns), but there are always some warnings for such solutions: they require some conformity to its standards.

Now, what happens when you create 7 divs as follows: <div class="col-md-1"> ? I did a quick test and well, I have 7 columns. Of course, they only occupy 7/12 of my container width, so if this is acceptable you can roll with it.

If not, you will either have to use your own solution (using existing bootstrap classes, or start from scratch), change the load (perhaps, but I would advise because it creates problems for future support), or change your design. Or maybe just use some other component / template?

Answer 3

Why not double 7-14? It is much easier to keep an even number. This way you can create a layout that appears to be up to 7 columns long. For example, if you want to build col-3 and col-4, you'll just do col-6 and col-8. For a calendar, this would mean getting a col-2 class every day.

Also check https://github.com/zirafa/bootstrap-grid-only , which may be easier to understand than Bootstrap mixers, although you can always just go to the Bootstrap setup page and enter the number of columns you want: http: / /getbootstrap.com/customize/