Vertical alignment of column rows in Bootstrap gri

Question

Suppose you have a two-column layout using Twitter Bootstrap, in which you want to have specific rows vertically aligned with each other:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h2>Column 1</h2>
      <p>Optional content of variable height.</p>
      <p><strong>Align this vertically...</strong></p>
    </div>
    <div class="col-sm-6">
      <h2>Column 2</h2>
      <p><strong>...with this</strong></p>
    </div>
  </div>
</div>

Vertical alignment is feasible with table layouts, however, sizing and responsive behaviour of Bootstrap's columns is lost:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">

<div class="container">
  <table class="row">
    <thead>
      <tr>
        <th scope="col"><h2>Column 1</h2></th>
        <th scope="col"><h2>Column 2</h2></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><p>Optional content of variable height.</p></td>
      </tr>
      <tr>
        <td><strong>Align this vertically...</strong></td>
        <td><strong>...with this</strong></td>
      </tr>
    </tbody>
  </table>
</div>

Another option is to split rows, however, the layout folds in wrong order on smaller resolutions.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h2>Column 1</h2>
    </div>
    <div class="col-sm-6">
      <h2>Column 2</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <p>Optional content of variable height.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <strong>Align this vertically...</strong>
    </div>
    <div class="col-sm-6">
      <strong>...with this</strong>
    </div>
  </div>
</div>

How do you achieve the same result while still maintaining the behaviour of Bootstrap's columns? Is using table layout the way to go or is it a dead-end? Is it otherwise possible without resorting to JavaScript to position a row to a computed offset?

EDIT: I aim to have the top of the rows aligned as is the case in the table layout.

Answer 1

You can do something like this to get rows of equal heights:

<style>
 .centered {
   text-align: center;
   font-size: 0;
  }

 .centered .myheight{
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
   vertical-align: top;
   margin-bottom: 5px; /*add this if you want to give some gap between the rows. */
  }
</style>


<div class="container-fluid">
 <div class="row centered">
    <div class="col-sm-4 myheight">
      Some  content
    </div> 
    <div class="col-sm-4 myheight">
      Some  content ...<br>
      Some more content
    </div> 
    <div class="col-sm-4 myheight">
      Some  content
    </div>  
    <div class="col-sm-4 myheight">
      Some  content
    </div>                                                              
 </div>
</div>

Answer 2

For what I know, I would test these solutions.

Solution 1 : Using Javascript (Jquery if you want) to detect the height of the left and the right div, and to tell them to have the same height.

You can apply this solution on the second content div to make the espace above your bold text having the same height.

Or to add.. for example as margin-top as needed in the smaller div (with bold text which need to be aligned) after comparing the heights of both.

Anyway, if you have both of theirs heights you will have enought informations to find a way. Multiples solutions are possible here, I let you find the better one for your context and needs.

<div class="container">
  <div class="row">
    <div class="col-sm-6 leftcolumn">
      <h2>Column 1</h2>
      <div class="astallas"><p>Optional content of variable height.</p></div>
      <p><strong>Align this vertically...</strong></p>
    </div>
    <div class="col-sm-6 rightcolumn">
      <h2>Column 2</h2>
      <div class="astallas"></div> // make this empty div have the same height that the left one with variable content
      <p><strong>...with this</strong></p>
    </div>
  </div>
</div>

Solution 2 (but with some browsers incompatibilties) : Use Flexbox <3 which is a native CSS3 fonctionnaly that give you a easy way to have your wanted divs' positions. http://flexboxfroggy.com/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I think that both of these works with bootstrap and will respect responsive needs.