boostrap column wrapping issue

Question

everyone. I am using bootstrap and i want to remove the space between the red and green grid column.(Please see the iamge). Here is my code.

<div class="col-xs-6" style='background: red;'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus aut ducimus ex consequuntur, illo ipsam unde esse reprehenderit placeat assumenda.
</div>
<div class="col-xs-6" style='background: orange;'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officia nesciunt excepturi minima at nemo doloremque sunt vel itaque, provident laboriosam incidunt saepe rem, et, architecto pariatur quidem numquam neque esse unde cumque. Reiciendis itaque libero nesciunt, autem est dolor. Placeat autem, voluptate ipsum delectus! Iure eius aliquam ut. Esse?Lorem ipsum dolor sit amet,
</div>

<div class="col-xs-6" style='background: green;'>>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officia nesciunt excepturi minima at nemo doloremque sunt vel itaque, provident laboriosam incidunt saepe rem, et, architecto paria
</div>

I have tried to put a clearfix class but it's not work.

want to remove the space between the red and green grid

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

You can use pull-right on the taller column like this..

<div class="row">
    <div class="col-xs-6" style="background: red;">
        ..
    </div>
    <div class="col-xs-6 pull-right" style="background: orange;">
        ..
    </div>
    <div class="col-xs-6" style="background: green;">..
    </div>
</div>

http://codeply.com/go/TytIBOYFcb

Note: This will only work specifically for this layout. If you have many columns with variable heights you'll need to take an approach as detailed in this question

Mr. Perfectionist · Answer 2 · 2016-08-06T08:38:57.583

You have to put red and green in a div. Like this:

In grid system, you have to follow this instruction then you will get the desired result.

Div 6 + Div 6 = Div 12
In first Div 6:
| red part   |
| green part |

Code Solution based on your code:

<div class="col-xs-6">

           <div class="row"  style='background: red;'>          
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus aut ducimus ex consequuntur, illo ipsam unde esse reprehenderit placeat assumenda.          
           </div>

           <div class="row" style='background: green;'>>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officia nesciunt excepturi minima at nemo doloremque sunt vel itaque, provident laboriosam incidunt saepe rem, et, architecto paria
           </div>
</div> 


<div class="col-xs-6" style='background: orange;'>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officia nesciunt excepturi minima at nemo doloremque sunt vel itaque, provident laboriosam incidunt saepe rem, et, architecto pariatur quidem numquam neque esse unde cumque. Reiciendis itaque libero nesciunt, autem est dolor. Placeat autem, voluptate ipsum delectus! Iure eius aliquam ut. Esse?Lorem ipsum dolor sit amet,
 </div>

Thanks for your reply. It is the only way to solve the issue? I am using a for loop to loop out the content. So i dont want to change the DOM structure. Thanks — hyPong, Aug 06 '16 at 08:57
This is my own opinion that can solve your problem. Obviously other way can solve this problem. But I don't know. — Mr. Perfectionist, Aug 06 '16 at 09:02

boostrap column wrapping issue

2 Answers2