新宿のWEB制作・システム制作会社エンジョインスタイル

ブログBLOG

bootstrap4_d-none_d-block

Bootstrap4では「.visible」「.hidden」の代わりに、「.d-block」 「.d-none」を使用する

2017.10.19

Bootstrap4では「.visible」「.hidden」などのクラスが削除された

bootstrap4_d-none_d-block2

Bootstrap3までは、「レスポンシブ・ユーティリティ」クラスとして、「.visible」「.hidden」を使用していたかと思います。



■Bootstrap3での「.visible」「.hidden」の主な使用例
①visible-xs
767px以下は表示

②hidden-lg
1200px以上は非表示



これがBootstrap4では使用できなくなりました。その代わりにBootstarp4では新たなクラスが用意されています。


Bootstrap4では、「.visible」「.hidden」の代わりに「.d-block」 「.d-none」クラスが整備

bootstrap4_d-none_d-block

「.visible」「.hidden」のクラスの代わりに用意されたのが、「.d-block」 「.d-none」クラスです。使い方は、下記の通りです。



■Bootstrap3での「.d-block」 「.d-none」の主な使用例
①d-block d-sm-none
575px以下は表示。576px以上は非表示

②d-none d-sm-block d-lg-none
575px以下は非表示。576px以上-991px以下では表示。992px以上は非表示



注意点は、xs(575px以下)の時は、「d-xs-none」、「d-xs-block」という記載はせず、「d-none」、「d-block」という記載になる点ですね。Bootstrap4では、「.visible」「.hidden」の代わりに「.d-block」 「.d-none」を使用する以外に、この点がBootstrap3と異なりますので注意が必要です。


まとめ

Bootstrap4に移行し、ちょっとした記述の違いで動作しなくなる事がありますので、しっかりと覚えていきたいものですね。