Wie kann ich mit Bootstrap ein Element nur auf mobilen Geräten sichtbar machen?
- Einleitung
- Die Bedeutung der Sichtbarkeit nur auf mobilen Geräten
- Bootstrap 4 & 5: Umgang mit responsiver Sichtbarkeit
- Wie macht man ein Element nur auf mobilen Geräten sichtbar?
- Beispielcode
- Zusammenfassung
Einleitung
In modernen Webdesigns ist es häufig notwendig, Inhalte je nach Gerätetyp unterschiedlich darzustellen. Besonders wichtig ist es dabei oft, bestimmte Elemente nur auf mobilen Geräten sichtbar zu machen, um die Nutzererfahrung zu optimieren und die Übersichtlichkeit zu gewährleisten. Bootstrap als weitverbreitetes Frontend-Framework bietet dafür spezielle Klassen und Möglichkeiten.
Die Bedeutung der Sichtbarkeit nur auf mobilen Geräten
Mobile Geräte haben kleinere Bildschirme und oft eine andere Nutzungssituation als Desktop-Computer. Einige Inhalte sind auf mobilen Geräten sinnvoll, auf Desktops jedoch nicht, oder umgekehrt. Um das Layout nicht mit unnötigen Elementen zu überladen, stellt Bootstrap Funktionen bereit, die es ermöglichen, Elemente gezielt und einfach abhängig von der Bildschirmgröße ein- oder auszublenden.
Bootstrap 4 & 5: Umgang mit responsiver Sichtbarkeit
In älteren Bootstrap-Versionen wurden Klassen wie visible-xs oder hidden-md verwendet, um Sichtbarkeit je nach Gerätegröße zu steuern. Diese wurden jedoch in neueren Versionen durch ein flexibleres System ersetzt. Bootstrap 4 und 5 verwenden das sogenannte Display Utility System, das es erlaubt, Anzeigeeigenschaften über Klassen wie d-none (nicht anzeigen) und d-* mit Breakpoints zu steuern.
Wie macht man ein Element nur auf mobilen Geräten sichtbar?
In Bootstrap bezeichnet man als "mobil" meist alle Geräte mit einer Bildschirmbreite unter 576 Pixeln. Um ein Element ausschließlich auf Mobilgeräten sichtbar zu machen, wird in Bootstrap 4/5 die Klasse d-block d-sm-none verwendet. Hier bedeutet d-block, dass das Element standardmäßig als Block angezeigt wird, also sichtbar ist. Die Klasse d-sm-none sorgt dafür, dass das Element ab der Bildschirmgröße "small" (ab 576px, also Tablets und größere Geräte) nicht mehr angezeigt wird.
Das Ergebnis ist, dass das Element nur auf sehr kleinen Bildschirmen (mobil) gezeigt wird und auf allen größeren Geräten (Tablets, Desktops) ausgeblendet bleibt.
Beispielcode
Ein einfaches Beispiel lässt sich mit einem <div> umsetzen, das nur auf Mobilgeräten sichtbar sein soll:
<div class="d-block d-sm-none"> Dieser Text ist nur auf mobilen Geräten sichtbar.</div>Zusammenfassung
Um mit Bootstrap ein Element nur auf mobilen Geräten sichtbar zu machen, sollten moderne Bootstrap-Utilities verwendet werden. Das Einbinden der Klassen d-block d-sm-none sorgt dafür, dass das Element standardmäßig sichtbar ist, aber ab dem "small"-Breakpoint verborgen wird. So lässt sich die Sichtbarkeit gezielt und einfach steuern, ohne komplexe CSS-Regeln schreiben zu müssen.