フロートとセンターブロックの書式：Bootstrapコードまとめ

フロートの書式

要素をフロートで左寄せする場合はclass「pull-left」を適用、
右寄せはclass「pull-right」を適用します。

また、子要素に指定されている回り込みを解除するには、class「clearfix」を適用します。

<h1 class="page-header">フロートの指定</h1>
<div class="clearfix">
  <img src="images/tomato002.jpg" class="pull-left" style="width:200px;margin-right:15px;">
  <h3 style="margin-top:0">トマト</h3>
  <p>トマト（学名：Solanum lycopersicum）は、南アメリカのアンデス山脈高原地帯（ペルー、エクアドル）原産のナス科ナス属の植物。</p>
</div>
<p>また、その果実のこと。多年生植物で、果実は食用として利用される。</p>

ブラウザでの表示

センターブロックの書式

要素を中央に配置する場合はclass「center-block」を適用します。
この場合、要素の幅を（width）をCSSで指定する必要があります。

HTML

<h1 class="page-header">センターブロック</h1>
<div class="well center-block" style="width:50%;">
  <h4>トマト</h4>
  <p>トマト（学名：Solanum lycopersicum）は、南アメリカのアンデス山脈高原地帯（ペルー、エクアドル）原産のナス科ナス属の植物。</p>
</div>
<img src="images/tomato002.jpg" class="center-block" style="width:50%;">

ブラウザでの表示