bootstrap column height different

Question

What I want to achieve using the grid system of Bootstrap 3 is the following: Image what I imagine. However, what I get with the normal row and col is the following: This is what I get.

Is there a ways how I can make the first element of the second row fit exactly the first element of the first row by keeping the different heights and preferably by keeping the order of the elements.

Please include any relevant code, as it is important to figuring out a solution. — gavsta707, Jul 06 '17 at 15:11

score 0 · Answer 1 · answered Jul 06 '17 at 15:15

Something like this?

https://codepen.io/anon/pen/RgBqNr

 <div class="row">
      <div class="col-xs-6">
        <div style="background: red">
          Hello<br/><br/><br/>
        </div>
        <div style="background: blue">
          Hello<br/><br/><br/>
          Again<br/><br/><br/>
        </div>          
      </div>
      <div class="col-xs-6">
        <div style="background: cyan">
          Hello<br/><br/><br/>
          Again<br/><br/><br/>
        </div>          
        <div style="background: red">
          Hello<br/><br/><br/>
        </div>
        <div style="background: blue">
          Hello<br/><br/><br/>
          Again<br/><br/><br/>
        </div>          
      </div>
    </div><!--/row-->

score 0 · Answer 2 · answered Jul 06 '17 at 16:17

0

Maybe you are trying to do something like an application named Trello.

You can try that application first.

And you can do the styling with this reference : Trello CSS Guide

answered Jul 06 '17 at 16:17

Sherly Febrianti

1,097
15
33

bootstrap column height different

2 Answers2