title: Bootstrap Vertical align in Column
body: <p>So I have a jumbotron with one row and two columns for Desktop view. The row height depends on the text. I want to center an image vertically to the text beside.</p>
  
  <p>I'm using a grid layout with two columns for this and following code to vertically center the image:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#jumbotron-introduction {
      
      background-color: white;
  }
  
  #p-introduction {
      
      font-size: 16px;
  }
  
  #image-introduction {
      
      width: 100%;
  }
  
  .vcenter {
      
      display: flex;
      align-items: center;
      justify-content: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
          &lt;div class="jumbotron" id="jumbotron-introduction"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-12 col-md-6 col-sm-6"&gt;
                      &lt;h3&gt;...&lt;/h3&gt;
                      
                      &lt;p id="p-introduction"&gt;...&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 col-md-6 col-sm-6 vcenter"&gt;
                      &lt;img src="Images/..." id="image-introduction"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But nothing changes, the image is still centered on the top of the column. I also tried the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.vcenter {
      
    display: inline-block;
    vertical-align: middle;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>But it's the same result, nothing happens.</p>
  
  <p>Thats how it looks like at the moment
  <a href="https://i.stack.imgur.com/mOvi2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mOvi2.png" alt="enter image description here"></a></p>
  
  <p>But I want it to look like this:
  <a href="https://i.stack.imgur.com/Qdc8n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qdc8n.png" alt="enter image description here"></a></p>