bootstrap 2 div left space and height issue

Question

I have created an html stuff with bootstrap 2.3.2 and not 3 The html is having one div with four child div's. The code is as given below

<div class="row-fluid column">
  <div class="span3 testOne">Sample One
                         <br>Sample One
                         <br>Sample One
  </div>
  <div class="span3 testTwo">Sample Two
  </div>
  <div class="span3 testThree">Sample Three
                           <br>Sample Three
                           <br>Sample Three
  </div>
  <div class="span3 testFour">Sample Four
  </div>
</div>

The code is working fine but I am facing two issues.

I am getting space in between the child div's
If one child div is big (containing more data) then the small div (containing less data) height is not proportional to the big one

what I expected to achieve is something like as shown below

Can anyone please tell me some solution for this

Note: I can't use flex since it wont work in IE8, also I need to use bootstrap 2.3.2 with proper responsive

JSFiddle

Possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — Gareth, Jan 12 '16 at 14:14
and for the gutters, see http://stackoverflow.com/questions/21254889/how-can-i-remove-the-gutter-between-bootstrap-3-column — I wrestled a bear once., Jan 12 '16 at 14:28
@Pamblam Here I am using bootstrap 2.3.2 and not bootstrap 3 — Alex Man, Jan 12 '16 at 14:29
Solutions 1 and 2 should both work from @Gareth link, as they should both work regardless of Bootstrap version and browser. — Tricky12, Jan 12 '16 at 14:34

score 0 · Answer 1 · edited Jan 12 '16 at 15:07

0

For css modify class as:

.column{
    overflow: hidden;
}

.testTwo{

    float: left;
    margin-bottom: -99999px;
    padding-bottom: 99999px;

}

.testThree{

    float: left;
    margin-bottom: -99999px;
    padding-bottom: 99999px;

}

edited Jan 12 '16 at 15:07

tiny sunlight

6,231
3
21
42

answered Jan 12 '16 at 14:24

Ashvin Jadav

134
4

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

1) The first issue can be solved by downloading the development version of Bootstrap. This has LESS files. Here you can go to /less/variables.less. The variable @gridGutterWidth is set to '20px'. If you make this '0px', the width between the columns will disappear.

You have to compile the less files. You can find out how here: http://lesscss.org/

2) The second issue is harder to solve. It's probably best to use solution #1 (using negative margins) from here: How can I make Bootstrap columns all the same height?

edited May 23 '17 at 10:27

Community

1
1

answered Jan 12 '16 at 14:31

thomasberends

89
8

@Pamblam Unfortunately you can't do that for older Bootstrap versions. He needs to use the older version and as you can see, that isn't possible anymore. http://getbootstrap.com/2.3.2/customize.html – thomasberends Jan 12 '16 at 14:41
@Pamblam No problem. I also thought that downloading a customized version was the solution, so I went to find the url for him. Then I found out it wasn't possible anymore. – thomasberends Jan 12 '16 at 14:43

score 0 · Answer 3 · answered Jan 12 '16 at 14:36

0

I would make a css tag such as .nomargin{margin-left:0px!important;} and add the class to the relevant divs testOne, testTwo, testThree, testFourand ensure the widths are set correctly

answered Jan 12 '16 at 14:36

Sphinx

956
7
21

but in this case the child div's wont fill the parent div – Alex Man Jan 12 '16 at 14:38
Then i suggest editing the code above to '.nomargin{margin-left:0px!important;min-height:60px!important;}' that way all your items have a minimumheight also. But remember to set the width accordingly. – Sphinx Jan 12 '16 at 14:46

bootstrap 2 div left space and height issue

3 Answers3