Wie zentriert man Text auf kleinen Bildschirmen mit Bootstrap?

Leon A. - July 19, 2024

Problem: Text auf kleinen Bildschirmen zentrieren

Das Zentrieren von Text auf kleinen Bildschirmen kann bei der Verwendung von Bootstrap schwierig sein. Das Standard-Layout richtet den Text möglicherweise nicht wie gewünscht aus, besonders auf mobilen Geräten. Dies kann dazu führen, dass Ihre Benutzeroberfläche weniger ansprechend aussieht und Benutzer möglicherweise verwirrt werden.

Lösung: Responsive Textausrichtung in Bootstrap implementieren

Verwendung von Bootstraps Textausrichtungsklassen

Bootstrap bietet Textausrichtungs-Utilities, mit denen Sie die Textausrichtung auf verschiedenen Bildschirmgrößen steuern können. Diese Klassen verwenden die gleichen Viewport-Breiten-Breakpoints wie das Rastersystem.

Um diese Klassen zu verwenden, wenden Sie sie auf das Element mit Ihrem Text an. Das Format lautet text-{breakpoint}-{alignment}, wobei {breakpoint} die Bildschirmgröße (xs, sm, md, lg, xl) und {alignment} left, center oder right ist.

Tipp: Kurzschreibweise für responsive Textausrichtung

Beachten Sie, dass Sie die Ausrichtung nicht für jeden Breakpoint angeben müssen. Bootstrap wendet die Ausrichtung auf den angegebenen Breakpoint und alle größeren Bildschirme an, bis eine andere Klasse sie überschreibt. Zum Beispiel zentriert text-md-center den Text auf mittleren Bildschirmen und größer, es sei denn, eine Klasse für größere Bildschirme (wie text-lg-left) wird ebenfalls angewendet.

Schritte zur Zentrierung des Footer-Textes

Um den Footer-Text auf kleinen Bildschirmen zu zentrieren und gleichzeitig die linke und rechte Ausrichtung auf größeren Bildschirmen beizubehalten, folgen Sie diesen Schritten:

Ändern Sie die HTML-Struktur: Behalten Sie die aktuelle Struktur bei, fügen Sie aber neue Klassen zu den <div>-Elementen mit dem Text hinzu.
Fügen Sie Ausrichtungsklassen zu den Spalten hinzu: Für die linke Spalte verwenden Sie text-xs-center text-sm-left. Für die rechte Spalte verwenden Sie text-xs-center text-sm-right.
Ausrichtung über alle Gerätegrößen hinweg: Das geänderte HTML sollte so aussehen:

   <footer>
   <div class="container">
       <div class="row">
           <div class="col-xs-12 col-sm-6 text-xs-center text-sm-left">
               <p>
                   &copy; 2015 example.com. Alle Rechte vorbehalten.
               </p>
           </div>
           <div class="col-xs-12 col-sm-6 text-xs-center text-sm-right">
               <p>
                   <a href="#"><i class="fa fa-facebook"></i></a> 
                   <a href="#"><i class="fa fa-twitter"></i></a> 
                   <a href="#"><i class="fa fa-google-plus"></i></a>
               </p>
           </div>
       </div>
   </div>
   </footer>

Diese Änderung zentriert den Text auf extra kleinen Bildschirmen (xs) und behält die ursprüngliche linke und rechte Ausrichtung auf kleinen Bildschirmen (sm) und größer bei.

Alternative Ansätze zur Textzentrierung

Benutzerdefinierte CSS-Medienabfragen

Sie können benutzerdefinierte CSS-Medienabfragen verwenden, um die Textausrichtung auf verschiedenen Bildschirmgrößen zu steuern. Dieser Ansatz beinhaltet das Schreiben von CSS-Regeln, die auf bestimmte Breakpoints abzielen.

Hier ist ein Beispiel für die Implementierung von benutzerdefinierten CSS-Medienabfragen:

@media (max-width: 575px) {
    .footer-text {
        text-align: center;
    }
}

@media (min-width: 576px) {
    .footer-left {
        text-align: let;
    }
    .footer-right {
        text-align: right;
    }
}

Vorteile der Verwendung von benutzerdefiniertem CSS:

Mehr Kontrolle über spezifische Breakpoints
Ermöglicht präziseres Anvisieren von Elementen

Nachteile der Verwendung von benutzerdefiniertem CSS:

Erfordert mehr Wartung
Kann mit Bootstraps eingebauten Klassen in Konflikt geraten
Erhöht die Größe der CSS-Datei

Tipp: Anpassen von Breakpoints

Sie können Ihre Medienabfragen verfeinern, indem Sie benutzerdefinierte Breakpoints verwenden, die Ihren Designanforderungen entsprechen. Zum Beispiel:

@media (min-width: 768px) and (max-width: 991px) {
    .footer-text {
        font-size: 14px;
    }
}

Dies ermöglicht es Ihnen, spezifische Stile für mittelgroße Bildschirme anzuwenden.

Flexbox-basierte Lösung

Flexbox bietet eine Möglichkeit, Text und andere Inhalte zu zentrieren. Sie können Flexbox mit Bootstraps Grid-System für eine flexible Ausrichtungslösung verwenden.

So implementieren Sie einen Flexbox-basierten Zentrierungsansatz:

Fügen Sie Ihrer Zeile eine Flexbox-Container-Klasse hinzu:

<div class="row d-flex">

Verwenden Sie Flexbox-Utility-Klassen für Ihre Spalten:

<div class="col-xs-12 col-sm-6 d-flex justify-content-center justify-content-sm-start">
    <!-- Inhalt der linken Spalte -->
</div>
<div class="col-xs-12 col-sm-6 d-flex justify-content-center justify-content-sm-end">
    <!-- Inhalt der rechten Spalte -->
</div>

Diese Lösung zentriert den Inhalt auf extrakleinen Bildschirmen und richtet ihn auf kleinen Bildschirmen und darüber nach links bzw. rechts aus.

Beachten Sie bei der Verwendung von Flexbox mit Bootstraps Grid-System:

Flexbox-Eigenschaften können das Layout der Grid-Spalten beeinflussen
Einige ältere Browser unterstützen Flexbox möglicherweise nicht vollständig
Komplexe Flexbox-Layouts können schwieriger zu warten sein

Sowohl benutzerdefinierte CSS- als auch Flexbox-Lösungen bieten Alternativen zu Bootstraps eingebauten Textausrichtungsklassen und ermöglichen eine spezifischere Kontrolle über Ihr Layout.