Bootstrap 4.4.0 | Bootstrap Blog2019年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 containersOverview #Responsive · Bootstrap従来、固定幅の.containerと全体幅の.container-fluidという２クラスしかありませんでしたが、.container-smのようにbreakpointを指定すると、それ未満の時は全体幅、以上の時は固定幅で表示できるようになりました。576px以上1200px未満のレイアウトについて、以前より柔軟に設定できるようになりました。（が、あんまり目立つメリットが思いつかなかったので、何か良い表現があれば教えてください…。）Responsive .row-cols classesGrid 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のように個別で大きさを指定することもできます。%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%E6%9C%80%E8%BF%91%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%81%9FBootstrap(v4.4)%E3%81%AE.row-cols%E3%80%81%E3%82%80%E3%81%97%E3%82%8D%E5%89%8D%E3%81%AF%E3%81%A9%E3%81%86%E3%81%A0%E3%81%A3%E3%81%9F%E3%82%93%E3%81%A0%E3%81%A3%E3%81%91%EF%BC%9F%E3%81%A3%E3%81%A6%E6%84%9F%E3%81%98%E3%81%A0%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%A7v4.3%E3%81%AE%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%A8%E8%A6%8B%E6%AF%94%E3%81%B9%E3%81%A6%E3%82%84%E3%81%A3%E3%81%A8%E7%90%86%E8%A7%A3%E3%81%97%E3%81%9F%E3%80%82%EF%BC%91%E6%9E%9A%E7%9B%AE%E3%81%8C%E5%BE%93%E6%9D%A5%E3%81%AE%E6%96%B9%E6%B3%95%E3%81%A7%E3%80%81%EF%BC%92%E6%9E%9A%E7%9B%AE%E3%81%8C%E6%96%B0%E3%81%97%E3%81%8F%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%81%9F%E6%96%B9%E6%B3%95%E3%80%82%20%3Ca%20href%3D%22https%3A%2F%2Ft.co%2FuaF2Gr2rBm%22%3Epic.twitter.com%2FuaF2Gr2rBm%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20%E3%82%8D%E3%81%8F%E3%81%9C%E3%81%86%E3%81%A9%E3%82%93%E2%9B%84%EF%B8%8F%20(%40rokuzeudon)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Frokuzeudon%2Fstatus%2F1202048755568001024%3Fref_src%3Dtwsrc%255Etfw%22%3EDecember%204%2C%202019%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E終わりに今回追加された機能は、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群を覗く限り、近いうちにリリースされる動きはなさそうですが…。