[css]bootstrap4のグリッドシステムを使って横並びのブロックを作ってみた

bootstrap4のグリッドシステムを使って横並びのブロックを作ってみようと思います。bootstrapは　col-数字　と記述することで足して１２になるように記述することで横並びのブロックを作成することができます。また、col-sm , col-md , col-lgなどサイズに応じてブロックの分割の程度をコントロールすることができます。今まで、display:inline-blockやfloatなどで横並びを作っていた方には非常に便利になりますね。

横並びのブロックをbootstrapで用意しよう

bootstrapを使って横並びのブロックを作ってみようと思います。今回は全てのデバイスで横並びにしたいため、　col-数字　を使用する事で実装したいと思います。

まずは２個のブロックを横並びにするものを作成してみようと思います。

<div class="row">
  <div class="col-6 bgred">
     <p>bootstrapを使って２個のブロックが横並びになります。</p>
 <p>bootstrapを使って２個のブロックが横並びになります。</p>
 <p>bootstrapを使って２個のブロックが横並びになります。</p>
 <p>bootstrapを使って２個のブロックが横並びになります。</p>
  </div>
  <div class="col-6 bgblue">
    <p>bootstrapを使って２個のブロックが横並びになります。</p>
 <p>bootstrapを使って２個のブロックが横並びになります。</p>
 <p>bootstrapを使って２個のブロックが横並びになります。</p>
 <p>bootstrapを使って２個のブロックが横並びになります。</p>
 <p>bootstrapを使って２個のブロックが横並びになります。</p>
   </div>
</div>

bootstrapを使って２個のブロックを横並びにしてみたサンプル実装例

上記のようにcol-6 col-6と記述する事で　横並びのブロックが２つ出来上がりましたね。　次は３つ横に並べたいと思います。

<div class="row">
  <div class="col-4 bgred">
     <p>bootstrapを使って3個のブロックが横並びになります。</p>
 <p>bootstrapを使って3個のブロックが横並びになります。</p>
 <p>bootstrapを使って3個のブロックが横並びになります。</p>
 <p>bootstrapを使って3個のブロックが横並びになります。</p>
  </div>
  <div class="col-4 bgblue">
    <p>bootstrapを使って3個のブロックが横並びになります。</p>
 <p>bootstrapを使って3個のブロックが横並びになります。</p>
 <p>bootstrapを使って3個のブロックが横並びになります。</p>
 <p>bootstrapを使って3個のブロックが横並びになります。</p>
 <p>bootstrapを使って3個のブロックが横並びになります。</p>
   </div>
<div class="col-4 bggreen">
    <p>bootstrapを使って3個のブロックが横並びになります。</p>
 <p>bootstrapを使って3個のブロックが横並びになります。</p>
 <p>bootstrapを使って3個のブロックが横並びになります。</p>
 <p>bootstrapを使って3個のブロックが横並びになります。</p>
 <p>bootstrapを使って3個のブロックが横並びになります。</p>
   </div>
</div>

bootstrapで３つのブロックを横並びにしたサンプル実装例

上記のように col-4が３つ並んでおり、足して１２になるため　横並びのブロックが３つ出来上がりましたね。こうする事で何個横に並べるか　そのデバイスはなんなのかといったことが記述できるため、非常に便利です。

まとめ

今回は、bootstrap4のグリッドシステムを使って横並びのブロックを作ってみました。非常に作り方はシンプルで書き方も簡単ですね。今までdisplay:inline-blockやfloatなどで横並びのブロックを作っていたかはぜひ使ってみたはいかがでしょうか。