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

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%;">