【bootstrap5】classのml、plとmr、prの名称が変更

bootstrap4のサポート期間が2023年1月に設定されたことからbootstrap5に徐々に移行させているという方も多いと思います。そこでbootstrap4 → 5で名称が変わったよく使うクラス名: ml, pl, mr, prについて解説します。

覚えやすいクラス名だったが、右書き設定追加に伴い名称変更

cssのプロパティ名がmargin-leftなのでml-〇、padding-leftなのでpl-〇という風に非常にわかりやすいクラス名だったのですが、bootstrap5では中東の言語で主流である右書きに対応したことからleft→start、right→endという概念の変更が導入されました。

そして、ml-〇 → ms-〇にmr-〇 → me-〇 というようにクラス名が変更になりました。

まとめると以下のようになります。

右書きサイトを作るときは都合が良いのかも

中東で商売をされる方は少ないとは思いますが、左書きのサイトを右書きサイトに変えたい時にこのクラス名だと行頭側・行末側のmarginやpaddingを指定するためいちいちleftとrightの指定を逆にしなくて済むという利点があります。

参考資料

Bootstrap5ドキュメント

技術情報bootstrap

Posted by Nao