title: Bootstrap 4: Vertically center badge with utilities only
body: <p>I'm making a Bootstrap 4 card that in its header needs to have an image, title, subtitle, badge and a close button. And the badge needs to be vertically centered on the right, while the image, title and subtitle need to be vertically centered on the left.</p>
  
  <p>Here's an image, it'll explain things better:</p>
  
  <p><a href="https://i.stack.imgur.com/MjL3I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MjL3I.png" alt="enter image description here"></a></p>
  
  <p>And I can't get either title and subtitle, nor badge vertically centered. I must do this using Bootstrap utilities only, so no additional CSS if possible(or very little if there's no other choice). How can I achieve this?</p>
  
  <p>Here's my 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>.close {
    font-size: 20px;
    text-shadow: none;
    color: #000;
    opacity: 1;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .card-title {
    font-size: 18px;
  }
  
  .card-subtitle {
    font-size: 11px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
  &lt;div class="card"&gt;
    &lt;button type="button" class="close close-chat mr-1" data-dismiss="modal" aria-label="Close"&gt;
        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;div class="card-header border-0 py-3"&gt;
      &lt;img src="http://placehold.it/45x45" class="rounded-circle float-left mr-3"&gt;
      &lt;h4 class="card-title mb-0 d-inline align-middle"&gt;Card title&lt;/h4&gt;
      &lt;span class="badge badge-success float-right px-4 py-1 mt-2"&gt;Success&lt;/span&gt;
      &lt;h6 class="card-subtitle text-muted"&gt;Card subtitle&lt;/h6&gt;
    &lt;/div&gt;
    &lt;div class="card-block"&gt;
      &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>