メディア
メディアオブジェクト
Bootstrapを使用すると、メディアオブジェクト（画像や動画など）をコンテンツの左または右に簡単に揃えることができます。これは、ブログのコメント、つぶやきなどを表示するために使用することができます。
基本のメディアオブジェクト
メディアオブジェクトのコンテナを作成するには、
.media
クラスを適用した
<div>
要素を使用します。
.media-left
クラスを使用して、メディアオブジェクト（画像）を左に、または
.media-right
クラスを使用して右に揃えます。
画像の横に表示されるテキストは、
class="media-body"
のコンテナの中に置かれます。
さらに、ヘッダーに
.media-heading
を使用することもできます。
左寄せ
山田太郎
私の名前は山田太郎です。架空の人物の名前によく使われます。
右寄せ
John Doe
私の名前は山田太郎です。架空の人物の名前によく使われます。
<p>左寄せ</p>
<div class="media">
<div class="media-left">
<img src="avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">山田太郎</h4>
<p>私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
</div>
</div>
<br/>
<p>右寄せ</p>
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
</div>
<div class="media-right">
<img src="avatar1.png" class="media-object" style="width:60px">
</div>
</div>
メディアの位置
メディアオブジェクトは、
.media-top
、
.media-middle
、または
.media-bottom
クラスを使用して、上、中、または下に配置することができます。
Media Top
私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。
Media Middle
私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。
Media Bottom
私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。
<!-- Media top -->
<div class="media">
<div class="media-left media-top">
<img src="avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</h4>
<p>私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
</div>
</div>
ネスティング
メディアオブジェクトはネストすることもできます。
山田太郎 Posted on 2017/04/10
私の名前は山田太郎です。架空の人物の名前によく使われます。
山田太郎 Posted on 2017/04/11
私の名前は山田太郎です。架空の人物の名前によく使われます。
山田太郎 Posted on 2017/04/12
私の名前は山田太郎です。架空の人物の名前によく使われます。
<div class="media">
<div class="media-left">
<img src="avatar1.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">山田太郎 <small><i>Posted on 2017/04/10</i></small></h4>
<p>私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="avatar1.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">山田太郎 <small><i>Posted on 2017/04/11</i></small></h4>
<p>私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="avatar1.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">山田太郎 <small><i>Posted on 2017/04/12</i></small></h4>
<p>私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
</div>
</div>
</div>
</div>
</div>
</div>