title: How to use vertical align in bootstrap
body: <p>Simple problem: How do I vertically align a col within a col using bootstrap? Example here (I want to vertically align child1a and child1b): </p>
  
  <p><a href="http://bootply.com/73666">http://bootply.com/73666</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="col-lg-12"&gt;
  
    &lt;div class="col-lg-6 col-md-6 col-12 child1"&gt;
      &lt;div class="col-12 child1a"&gt;Child content 1a&lt;/div&gt;
      &lt;div class="col-12 child1b"&gt;Child content 1b&lt;/div&gt;
  
    &lt;/div&gt;
  
  
    &lt;div class="col-lg-6 col-md-6 col-12 child2"&gt;
    Child content 2&lt;br&gt;
    Child content 2&lt;br&gt;
    Child content 2&lt;br&gt;
    Child content 2&lt;br&gt;
    Child content 2&lt;br&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Some CSS:</p>
  
  <pre><code>.col-lg-12{
  top:40px;
  bottom:0px;
  border:4px solid green;
  
  
  }
  
    .child1a, .child1b{
    border:4px solid black;
    display:inline-block !important;
  }
  
  .child1{
    border:4px solid blue;
    height:300px;
    display:table-cell !important;
    vertical-align:middle;
  }
  
  .child2{
    border:4px solid red;
  }
  </code></pre>