Bootstrap によるレスポンシブ Web デザイン
カードを配置する
ここではカードを配置します．これも Bootstrap のページからコードをコピーして貼り付けるだけで簡単に配置できます．貼り付けたあとに画像の src と alt 属性は指定しましょう．
index.html（抜粋）
<div class="card" style="width: 18rem;">
<img src="ink.png" class="card-img-top" alt="ink">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
ブラウザでの表示結果
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
ここで説明したグリッドシステムと組み合わせると，スマートフォンでは4つのカードが縦に並び，PC 等の幅の広いブラウザでは2行2列に配置されるようにできます．コードが少し長くなって見にくいですが，row の中に2つの col-md-6 があり，その col-md-6 一つひとつの中にさらに card が配置されているという構造になっていることを確認してください．なおカードの幅は 18rem から 14rem に調整しています．
index.html（抜粋）
<div class="row">
<div class="col-md-6">
<div class="card" style="width: 14rem;">
<img src="ink.png" class="card-img-top" alt="ink">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card" style="width: 14rem;">
<img src="ink.png" class="card-img-top" alt="ink">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card" style="width: 14rem;">
<img src="ink.png" class="card-img-top" alt="ink">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card" style="width: 14rem;">
<img src="ink.png" class="card-img-top" alt="ink">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
ブラウザでの表示結果
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere