81

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

col 3 | col 4.5 | col 4.5
BENARD Patrick
  • 30,363
  • 16
  • 99
  • 105
Nerdar
  • 1,103
  • 2
  • 10
  • 23
  • 1
    have tried offset. but is not what i need. – Nerdar Apr 10 '14 at 11:29
  • I have created a [custom bootstrap 4.0 extension](https://stackoverflow.com/questions/30026855/can-i-give-the-col-md-1-5-in-bootstrap/66729048#66729048) that allows adding half and quarter of column. – Hooman Bahreini Mar 21 '21 at 05:25

1 Answers1

177

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>
BENARD Patrick
  • 30,363
  • 16
  • 99
  • 105
  • 7
    shoot... didn't have a thought like that. brain is overclocked already lol. thank you so much. it works so well. :D – Nerdar Apr 10 '14 at 11:35
  • yes. i'ws waitin' to close it. says need to wait 2 mins to close lol. thank you ^_^ – Nerdar Apr 10 '14 at 11:40
  • 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? :(- – J86 Oct 30 '14 at 09:51
  • 1
    @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.... – BENARD Patrick Oct 30 '14 at 10:52
  • 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) – nclsvh May 18 '16 at 09:21
  • Great answer for general divs/elements, however it doesn't seem applicable for elements in a tables. – Mitchb May 27 '16 at 03:33
  • Can't believe I didn't think of this. Thank you. – Greg Blass Oct 11 '17 at 22:43
  • 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"? – Genki Aug 07 '18 at 20:56
  • @Genki One row is splitted in 12 parts(cols), So a col-9 split in 2 equals parts makes two cols of 4.5 – BENARD Patrick Aug 07 '18 at 22:47
  • @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? – Genki Aug 09 '18 at 05:15
  • @genki, because the asker wanted two col-4.5 so => 9 * (6/12) = 4.5 .... I can't be clearer... – BENARD Patrick Aug 09 '18 at 08:51
  • @pbenard I'm new to TWBS. What's confusing me is that in the OP's example, the first
    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 :-)
     – Genki Aug 09 '18 at 17:42
  • @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 : https://getbootstrap.com/docs/3.3/css/#grid-nesting – BENARD Patrick Aug 09 '18 at 17:48
  • @pbenard AHH -- that new .row was what I was missing. Now I get it. Thanks for hanging in there with me! – Genki Aug 09 '18 at 20:43
  • col 5.5 | col 1 | col 5.5 – Tim Harker Nov 22 '18 at 05:07
  • 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.... https://getbootstrap.com/docs/3.3/customize/ – BENARD Patrick Nov 22 '18 at 10:27