2018年5月

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