bootstrap 5 の justify-content utilities を使う

投稿日: 2021年 2月 5日

bootstrap の justify-content utilities を使って、フッダーのボタンを調整したので、備忘録。

修正前

修正後

Bootstarp の justify-content utilities とは
  • responsive flexbox utilities の 一つ

  • responsive flexbox utilities はレイアウトや要素の配置、要素のサイズ変更などを柔軟に行える bootstrap の仕組み

  • bootstrap で flexbox を使うには ある要素に対して d-*-flex のクラスを設定するだけ

    (※ d-*-flexの * は適用させたい display プロパティ、breakpointを入れる)

  • そうすると、その要素は、flex container になる

  • それで、その子要素が flex な配置になる

  • justify-content utilities を使うには、

  • d--flex のクラスで flex-container にした要素に対して、justify-content- をつけるだけ

justify-content-* の * の部分は、どのような配置にしたいかで、適宜置き換える。
例えば、このブログのフッターについては、要素の幅いっぱいにボタンが広がって圧迫感があったボタンに対して、隙間を与えるために、justify-content-aroundを使用しました。

具体的なコードは jsfiddle に書いてあるとおりです。

プログラミングに関するオススメ書籍