BS Hilfsklasse .visible & .hidden - Verständnisfrage

[Groundhog]

Ich steh bei Bootstrap ein wenig auf dem Schlauch..insbesondere beim Viewport und den Responsive Hilfsklassen .visible und .hidden...


Ich habe einen Container in einem Raster der bei den Seitenbreiten -lg, -md, -sm mit "text-right" dargestellt werden soll. Bei Seitenbreite -xs allerdings soll der gleiche Container mit "text-center" dargestellt werden.

Grundsätzlich ist mir klar, dass ich im HTML einfach zweimal den gleichen Block schreiben kann...einmal mit den Klassen für hidden-xs und nochmal mit den Klassen für visible-xs.

Gibt es dafür aber auch eine "elegantere, Codesparendere" Lösung um nicht jedesmal den html Code doppeln zu müssen?

Danke schonmal für eure Mühe...

 

[martinwolf]

AW: BS Hilfsklasse .visible & .hidden - Verständnisfrage

Nein, auf keinen Fall zweimal den gleichen HTML Block nehmen nur wegen der Sichtbarkeiten oder Textausrichtung. Das bläst die ganze Struktur unnötig auf.

hidden-XXX blendet die Elemente auf den gesetzten Viewports lg, md, sm, xs aus
visible-XXX zeigt die Elemente auf den gesetzten Viewports lg, md, sm, xs ein.

text-center, text-right und text-left unterscheidet keine Viewports. Hier leg dir einfach neue CSS Klassen an die anhand des Viewports die Textausrichtung übernehmen.

Beispiel

@media (max-width: 768) {
    .text-center-sm {
        text-align: center;
    }
}

 

[Groundhog]

AW: BS Hilfsklasse .visible & .hidden - Verständnisfrage

Hey Martin,

Verstehe, verstehe....das ist ja mehr als praktisch besten Dank.