Zurück zur Übersicht

Boostrap/CSS: Line-Height Utility Classes

#Tutorials#Bootstrap#CSS

Bootstrap hat schon viele Utility Klassen um das meiste am Design ohne eine weiteres CSS zu machen, jedoch fehlte mir etwas um die Line-Height anpassen zu können. Daher habe ich ein paar Zeilen CSS ergänzt um diese Funktionalität herzustellen. Natürlich kann man die Line-Heights hier anpassen, wie es für einen am besten passt.

Hier das CSS

.text-height-0 {
  line-height: 1!important;
}
.text-height-1 {
  line-height: 1.5!important;
}
.text-height-2 {
  line-height: 2!important;
}
.text-height-3 {
  line-height: 2.5!important;
}
.text-height-4 {
  line-height: 3!important;
}
.text-height-5 {
  line-height: 3.5!important;
}

Diese Klassen kann nun ganz einfach benutzen.

<p class="text-height-1">
  Lorem Ipsum....
</p>

Kommentare

Es gibt noch keine Kommentare. Sei der Erste!

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.