狼読

 
2020/05/22

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

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

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

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

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

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

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

bootstrapを使って2個のブロックが横並びになります。

bootstrapを使って2個のブロックが横並びになります。

bootstrapを使って2個のブロックが横並びになります。

bootstrapを使って2個のブロックが横並びになります。

bootstrapを使って2個のブロックが横並びになります。

bootstrapを使って2個のブロックが横並びになります。

bootstrapを使って2個のブロックが横並びになります。

bootstrapを使って2個のブロックが横並びになります。

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

<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で3つのブロックを横並びにしたサンプル実装例

bootstrapを使って3個のブロックが横並びになります。

bootstrapを使って3個のブロックが横並びになります。

bootstrapを使って3個のブロックが横並びになります。

bootstrapを使って3個のブロックが横並びになります。

bootstrapを使って3個のブロックが横並びになります。

bootstrapを使って3個のブロックが横並びになります。

bootstrapを使って3個のブロックが横並びになります。

bootstrapを使って3個のブロックが横並びになります。

bootstrapを使って3個のブロックが横並びになります。

bootstrapを使って3個のブロックが横並びになります。

bootstrapを使って3個のブロックが横並びになります。

bootstrapを使って3個のブロックが横並びになります。

bootstrapを使って3個のブロックが横並びになります。

bootstrapを使って3個のブロックが横並びになります。

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

まとめ

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

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

投稿カレンダー

2024年3月
 123
45678910
11121314151617
18192021222324
25262728293031

Technology

category

©狼読