How to remove space between rows with two columns

Question

Current layout structure:

+--------------+
| -----Row---- |
+--------------+
| Col 8  col 4 |
|          ^   |
|          |   | //Vertical Space here between col-4
|          ^   |
| Col 8  col 4 |
| -----Row---- |
+--------------+

Desired output:

+--------------+
| -----Row---- |
+--------------+
| Col 8  col 4 |
|        col 4 | //Remove Vertical Space here between col-4
| Col 8  col 4 |
| -----Row---- |
+--------------+

Because there is vertical space between col-8, the columns on right with col-4 are vertically spaced as they are in same row. How do I remove the space?

I want to remove vertical spaces for column on the right side, not make all columns equal sizes.

If you look at this site: http://mashable.com/, see how second column is stacked with no vertical space and third column stacked with different size/height.

Similarly, I want to make my second column stacked with no vertical space.

Do you mean you have 3 `col-4` and 2 `col-8`, or are you asking how to make the `col-8` and `col-4` the same height? — Carol Skelly, Apr 05 '17 at 16:17
So then you have more than 2 `col-4`? Because the LINK doesn't show that so it was unclear what the question was — Carol Skelly, Apr 05 '17 at 16:52
@ZimSystem That's why in the diagram, I have put more than 2 `col-4` — kittu, Apr 05 '17 at 16:54
And the updated question has also been asked before http://stackoverflow.com/questions/28364307/vertical-space-between-bootstrap-rows — Carol Skelly, Apr 05 '17 at 18:01
@ZimSystem Actually that question is little different in structure. I have columns already in a row with col8 and col4, but I figured out that the problem was with javascript which was looping the `class=row` and creating separate rows — kittu, Apr 05 '17 at 18:10
@ZimSystem When you pointed out `When your columns are in separate rows,` I check the JS code so I need to change the JS logic to not to loop `class=row` — kittu, Apr 05 '17 at 18:11

score 1 · Accepted Answer · edited May 23 '17 at 12:09

You can put the list items in 2 separate columns like this...

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <!--item-->
            <!--item-->
        </div>
        <div class="col-md-4">
            <!--item-->
            <!--item-->
            <!--item-->
        </div>
    </div>
</div>

http://www.codeply.com/go/60g6A6sW9U

When your columns are in separate rows, there is no way to make different height columns "fit" together without gaps. Otherwise you have to use a "masonry" type solution as explained in this answer.

How to remove space between rows with two columns

1 Answers1