ブートストラップグリッド内の画像の横にタイトルを配置するにはどうすればよいですか？

Question

私はAppleのiPhoneメッセージングインターフェイスを複製しようとしています。しかし、インボックスの人物の名前をイニシャルアイコンの隣に表示することはできません。小さな灰色の文字を人の名前の下に置くことはできません。私はあなたが私が何を探しているの良いアイデアを持つことができるように、スクリーンショットを含めている！あなたがこの作品を作る方法上の任意のアイデアを持っているなら、私に知らせてください

<section class="messaging-body"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-6 col-md-6"> 
       <div class="messaging-icon"> 
        <img class="img-responsive" src="message-name.png"> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

Current image
Desired image

：ここ

は私が持っている私の現在のHTMLマークアップコードです。ありがとう！

Answer 1

イニシャルの幅が大きくなる可能性はありますか？頭文字にcol-md-2またはcol-md-1を使ってみましたか？また、CSSのインラインブロックを使用して、2つのテキストボックスをイニシャル画像に揃えることもできます。私は1つのdivにテキストをラップするので、これを整列させるだけです。あなたが投稿したコードから、これは私の最高の推測だろう！

<section class="messaging-body"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-2 col-md-2"> 
       <div class="messaging-icon"> 
        <img class="img-responsive" src="message-name.png"> 
       </div> 
      </div> 
      <div class="col-xs-10 col-md-10"> 
       <div class="message"> 
        <h4>Name of the person</h4> 
        <p>Lorem Ipsum dolor sit amet, dicta paulo no est...</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

CSS

.message { 
    display: inline-block; 
}