Bootstrap4の右寄せCSSクラスはtext-xs-rightに！

 

最近Bootstrap4が公開されて、Bootstrap3から乗り換えられた方も多いのではないでしょうか。

2016年1月現在、弊社サイトのフレームワークはBootstrap4を採用しています。
Bootstrap3で使えていたコードが、最新verでは使えないこともあります。

Bootstrap3までのテキスト右寄せ

<p class="text-right">これは右寄せテキストです。これは右寄せテキストです。これは右寄せテキストです。</p>

このようにtext-rightで右寄せにできました。
しかしこのクラスはBootstrap4には対応していません。

Bootstrap4からの右寄せCSSクラス

Bootstrap4ドキュメントシートを確認すると改良されていました！

<p class="text-xs-left">スマホでも左寄せ</p>
<p class="text-xs-center">スマホでも真ん中寄せ</p>
<p class="text-xs-right">スマホでも右寄せ</p>

デモ

ということは、-xs-を-sm-にするとタブレット以下は寄せを解除できるということですね！