Bootstrap - Customizing Cards
<p>I'm working on an app that uses the Bootstrap 4 Alpha. I'm trying to create some <a href="http://v4-alpha.getbootstrap.com/components/card/" rel="nofollow">cards</a>. I'm trying to recreate something that looks like a course card on <a href="https://teamtreehouse.com/library" rel="nofollow">this site</a>. But, I'm trying to use the default bootstrap styling. In other words, I'm trying to create a card that looks like this:</p>

<pre><code>+------------------------------------------------------------+
| [icon]                                          04.07.2016 |
+------------------------------------------------------------+
| intro                                                      |
| heading                                                    |
| a description that takes a couple of lines. It may         |
| have two or three lines of text and they'll wrap           |
| like this.                                                 |
|                                                            |
| [tag 1] [tag 2]                                            |
+------------------------------------------------------------+
</code></pre>

<p>I've been experimenting with recreating this <a href="http://www.bootply.com/hGaQd6w1EQ" rel="nofollow">here</a>. The date isn't on the same line as the icon. My code looks like this:</p>

<pre><code>&lt;br&gt;
&lt;div class="container"&gt;
  &lt;div class="card"&gt;
    &lt;div class="card-header"&gt;
      &lt;i class="fa fa-circle"&gt;&lt;/i&gt;
      &lt;div class="text-xs-right"&gt;04.07.2016&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card-block"&gt;
      &lt;div class="text-muted"&gt;intro&lt;/div&gt;
      &lt;h4 class="card-title"&gt;Heading&lt;/h4&gt;
      &lt;p class="card-text"&gt; a description that takes a couple of lines. It may have two or three lines of text and they'll wrap like this.&lt;/p&gt;
      &lt;ul class="list-inline text-muted"&gt;
        &lt;li class="list-inline-item"&gt;&lt;i class="fa fa-tag"&gt;&lt;/i&gt; tag 1&lt;/li&gt;
        &lt;li class="list-inline-item"&gt;&lt;i class="fa fa-tag"&gt;&lt;/i&gt; tag 2&lt;/li&gt;        
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>What am I doing wrong?</p>