LOGzeudon

名古屋で働いているWebデザイナーのブログです

Bootstrap v4.4で追加された新しいレイアウト用クラス「row-cols」の使い方

2019年11月末、Bootstrapはv4.4へとアップデートし、いくつかの機能が追加された。

blog.getbootstrap.com

  • New responsive containers! Over a year in the making, fluid up to a particular breakpoint, available for all responsive tiers.
  • New responsive .row-cols classes for quickly specifying the number of columns across breakpoints. This one is huge for those of you who have asked for responsive card decks.

特にこの2つの登場によって、レスポンシブ対応用の記述がよりスマートになった。

前提

v4.4.0以降のBootstrapを読み込まないと使えない。(現在の最新版はv4.4.1)

getbootstrap.com

Responsive containers

getbootstrap.com

従来、固定幅の.containerと全体幅の.container-fluidという2種類のクラスしかなかったが、.container-smのようにbreakpointを指定すると、それ未満の時は全体幅、以上の時は固定幅で表示できるようになった。

f:id:rokuzeudon:20200105113134j:plain

これにより、576px以上1200px未満のレイアウトについて、以前より柔軟になっただろう。(しかしあんまり目立つメリットが思いつかなかったので、何か良い表現があれば教えてほしい…。)

Responsive .row-cols classes

getbootstrap.com

レスポンシブ対応なカード型レイアウトが簡単に表現できるようになった。ブログ記事やスタッフ紹介などの一覧ページで便利だろう。

例えば「スマホで1列・タブレットで2列・それ以上の画面で3列なレイアウト」を表現するのに、これまでは次のような書き方をしていただろうか。

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-lg-4"></div>
    <div class="col-sm-6 col-lg-4"></div>
    <div class="col-sm-6 col-lg-4"></div>
    <div class="col-sm-6 col-lg-4"></div>
    <div class="col-sm-6 col-lg-4"></div>
    <div class="col-sm-6 col-lg-4"></div>
  </div>
</div>

colの数だけbreakpointの記述を繰り返す必要があり、決してスマートな書き方ではなかった。それが次のように書き換えられるようになった。

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

だいぶ直感的になり、どういう意図のクラス指定なのかも読み取りやすくなった。ちなみに.col-sm-6のように個別で大きさを指定することもできる。

終わりに

今回追加された機能は、Bootstrap 5にも引き継がれる予定なのですぐ使って良いとのこと。

Nearly all new features will be carried forward into Bootstrap 5, so feel free to start using them now.
https://blog.getbootstrap.com/2019/11/26/bootstrap-4-4-0/

Bootstrap 5の続報も楽しみだ。GitHubのissue群を覗く限り、近いうちにリリースされる動きはなさそうだが…。