Bootstrap 4.4.0 | Bootstrap Blog
2019年11月末、Bootstrapはv4.4へとアップデートし、いくつかの機能が追加されました。特に次の2つの登場で、レスポンシブ対応用の記述がよりスマートになりました。

- 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.

前提

新機能ですので、v4.4.0以降のBootstrapを読み込まないと使えません。最新版はこちらからダウンロードしましょう。
Bootstrap · The most popular HTML, CSS, and JS library in the world.

Responsive containers

Overview #Responsive · Bootstrap

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

576px以上1200px未満のレイアウトについて、以前より柔軟に設定できるようになりました。（が、あんまり目立つメリットが思いつかなかったので、何か良い表現があれば教えてください…。）

Responsive .row-cols classes

Grid system #Responsive classes · Bootstrap

レスポンシブ対応なカード型レイアウトが、簡単に表現できるようになりました。ブログ記事やスタッフ紹介などの一覧ページで役立ちそうです。

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

<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群を覗く限り、近いうちにリリースされる動きはなさそうですが…。