ブートストラップ - カードのカスタマイズ

Question

私はBootstrap 4 Alphaを使用するアプリケーションを開発中です。私はcardsを作成しようとしています。私はthis siteのコースカードのようなものを再現しようとしています。しかし、私はデフォルトのブートストラップスタイリングを使用しようとしています。私はこのhereを再作成して実験してきた

+------------------------------------------------------------+ 
| [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]           | 
+------------------------------------------------------------+ 

：つまり、私はこのようになりますカードを作成しようとしています。日付はアイコンと同じ行にありません。私のコードは次のようになります：

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

私は間違っていますか？

Answer 1

ブートストラップ4の場合、それは

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

...のようになります更新Bootply：http://www.bootply.com/2EY9ZfMrdl

EDIT - BS4アルファ6のようにpull-rightがfloat-rightに変更されました。

Answer 2

このようにしてみてください。

<div class="card-header clearfix"> 
     <i class="fa fa-circle pull-left"></i> 
     <div class="text-xs-right pull-right">04.07.2016</div> 
    </div>