Half columns in Twitter Bootstrap 3

Question

I couldn't figure out how to make the bootstrap column like this:

col 3 | col 4.5 | col 4.5 

Solution

You can try this :

Just split a col-9 in 2 parts.

Bootply : http://www.bootply.com/128927

HTML :

   <div class="col-xs-3">  col-xs-3 </div>
   <div class="col-xs-9">
      <div class="row">
         <div class="col-xs-6">col-xs-4.5</div>
         <div class="col-xs-6">col-xs-4.5  </div>
      </div>
   </div>

Comments

[Nerdar]

have tried offset. but is not what i need.

[Hooman Bahreini]

I have created a custom bootstrap 4.0 extension that allows adding half and quarter of column.

[Nerdar]

shoot... didn't have a thought like that. brain is overclocked already lol. thank you so much. it works so well. :D

[Nerdar]

yes. i'ws waitin' to close it. says need to wait 2 mins to close lol. thank you ^_^

[J86]

This isn't working for me! I'm using the latest version of Bootstrap 3 and I'm using col-md-9 and want it split into two equal parts! Any ideas? :(-

[BENARD Patrick]

@Ciwan col-md is just for 'medium' and larger screen, the fact to use col-xs makes it works for all device. Instead of say 'it doesnt work' make a fiddle and show what's not working....

[nclsvh]

So there is no wat to do like a width: 80%; inside a col-md-6 (if for example you want so whitespace on the right side)

[Mitchb]

Great answer for general divs/elements, however it doesn't seem applicable for <td> elements in a tables.

[Greg Blass]

Can't believe I didn't think of this. Thank you.

[Genki]

In the "col-xs-6" is there a reason why "6" is used as opposed to some other value? Is there a relationship between "6" and the "col-9"?

[BENARD Patrick]

@Genki One row is splitted in 12 parts(cols), So a col-9 split in 2 equals parts makes two cols of 4.5

[Genki]

@pbenard Yes, I understand that one Bootstrap row is split into 12 columns, and I understand that if a 12-col row were split in 2, that would be two, 6-col divs. But the answer given is that dividing "col-9" into 2 = 4.5, so therefore use "col-6". Why "6"??? If 4.5 were rounded up to "col-5", or down to "col-4," that would make sense. Why is 9 split into 2 = 6?

[BENARD Patrick]

@genki, because the asker wanted two col-4.5 so => 9 * (6/12) = 4.5 .... I can't be clearer...

[Genki]

@pbenard I'm new to TWBS. What's confusing me is that in the OP's example, the first <div> already uses 3 columns, so there are only 9 columns remaining. Dividing those 9 by 2 = 4.5 cols -- makes sense. So, I don't understand why 6 gets used. You gave "9 * (6 divided by 12)" but I don't understand why 6 shows up. If the question was, "How to divide 12 cols in half?" the answer would obviously be 6. I'm not seeing why "Divide the 9 remaining columns in half = 6." Maybe someone can explain the logic that this newbie is missing :-)

[BENARD Patrick]

@Genki, In the remaining 9 cols, a new .row is setted, so, just see this as a king of percentage.... 100% of col.9 is equal to 12 cols... So if you wants 2 cols of 50% you have to make 2 col-6 because (6/12 = 50%), the row is applicated to the parent container.... I sugget you to read the doc, especially this part : getbootstrap.com/docs/3.3/css/#grid-nesting

[Genki]

@pbenard AHH -- that new .row was what I was missing. Now I get it. Thanks for hanging in there with me!

[Tim Harker]

col 5.5 | col 1 | col 5.5

[BENARD Patrick]

There are no bootstrap solution for your case, you have to create your own width in percent (5.5/12*100) or use your own customized bootstrap (v3.3) and compile it with 24 columns.... getbootstrap.com/docs/3.3/customize