Bootstrap 4で変更になったhiddenとvisible

Bootstrap3からBootstrap4に移行してもっとも戸惑ったのがブレイクポイントごとに表示・非表示を制御するhiddenとvisibelが使えなくなってしまった点。
以下に変更後にどのようになったかをまとめてみました。正直、以前の方が分かりやすかった気がします。

  • .visible-xs-{display} ⇒ .d-{display}.d-sm-none/.d-{display}.d-md-none
  • .visible-sm-{display} ⇒ .d-none.d-md-{display}.d-lg-none
  • .visible-md-{display} ⇒ .d-none.d-lg-{display}.d-xl-none
  • .visible-lg-{display} ⇒ .d-none.d-xl-{display}
  • .hidden-xs ⇒ .d-none.d-sm-{display}/.d-none.d-md-{display}
  • .hidden-sm ⇒ .d-{display}.d-md-none.d-lg-{display}
  • .hidden-md ⇒ .d-{display}.d-lg-none.d-xl-{display}
  • .hidden-lg ⇒ .d-{display}.d-xl-none

{display} の種類が block, inline, inline-block の3種類から block, inline, inline-block, table, table-cell, table-cell, flex, inline-flex の9種類に増加
※以下のサイトを参考にさせて頂きました。
http://cccabinet.jpn.org/bootstrap4/utilities/display