Bootstrapを使ってスマホだけ表示したい時、もしくはスマホだけ非表示にしたい時

使用するクラスは"d-none"

<div class="d-none d-md-block">
...
</div>

こうすると、mdサイズ以上はdisplay:blockにしろってクラス名になる。

d-noneはdisplay:none つまり非表示にさせるクラス名

逆も簡単

<div class="d-block d-md-none">
...
</div>

これでmdサイズ以上は非表示になる。

ランディングページを作成する際に、
画像を2種類用意して横幅によって切り替えしたい場合などに良い。
もちろん他の要素にも使用できるので、
colと組み合わせて端末の横幅に合わせてレイアウトを変える場合にも使用できる。
結構便利なので、
Bootstrap使い始めの方とかおすすめです。
それでは。

いいなと思ったら応援しよう!

ukah(夢見猫うかあ)
最後までお読みいただき、ありがとうございます。 今後もたくさんの方に読んでいただけるよう精進します。 活動継続にあたりサポートをいただけると、 私のモチベーション維持やクオリティ向上に繋がります。 頂いたサポートはクリエイターとしての活動費にさせて頂きます。 ぜひお願い致します。