bootstrap 4 変更点

bootstrap 3→4 変更点 ハマったこと覚書です。(ほぼ自分用ですみません)
早く日本語解説増えるといいな…

  • <div class=”text-sm-center text-md-left”>
    スマホ時センター、それ以外左寄せ
  • img-responsive → img-fluid
  • 3分割したいときは

<div class=”row”>
<div class=”col”></div>
<div class=”col”></div>
<div class=”col”></div>
</div>
のみ!数字不要。

  • col-xsはなくなった→ただのcolのみ
  • 画像レスポンシブ クラス名変更
    img-resposive →img-fluid
  • センター寄せ
    <div class=”row”>
    <div class=”col-sm-6 col-sm-offset-3″>…↓<div class=”row justify-content-center”>
    <div class=”col-sm-6″>…※row側につけるのがポイント
  • d-flexを入れ子にするときはd-flexクラス2個目以降不要(?)×<div class=”d-sm-flex”>
    <div class=”each_outline d-flex flex-column” > ←なぜか表示おかしくなる〇<div class=”d-sm-flex”>
    <div class=”each_outline flex-column” >
  • 均等に分割したいときは d-flex より 普通の col-smを使う