... Links/Buttons ...

Button Button (Primary) Button (Link) Button (Success) Button (Error) 
<a href="" class="btn">Button</a> 
<a href="" class="btn btn-primary">Button (Primary)</a> 
<a href="" class="btn btn-link">Button (Link)</a> 
<a href="" class="btn btn-success">Button (Success)</a> 
<a href="" class="btn btn-error">Button (Error)</a>
Button (klein) Button (primary / klein) Button (groß) Button (primary / groß) 
<a href="" class="btn btn-sm">Button (klein)</a> 
<a href="" class="btn btn-sm btn-primary">Button (primary / klein)</a> 
<a href="" class="btn btn-lg">Button (groß)</a> 
<a href="" class="btn btn-lg btn-primary">Button (primary / groß)</a>
Button (fullwidth) Button (fullwidth / primary / groß) 
<a href="" class="btn btn-block">Button (fullwidth)</a> 
<a href="" class="btn btn-block btn-primary btn-lg">Button (fullwidth / primary / groß)</a>

Weitere Textelemente

Übersicht von weiteren Textelementen, wie Listen und Textblöcke.

... Texte ...

Dieser Text wird nur in Großbuchstaben ausgegeben.

<div class="text-uppercase">
  Dieser Text wird in Großbuchstaben ausgegeben.
</div>

Dieser Text wird nur in Kleinbuchstaben ausgegeben.

<div class="text-lowercase">
  Dieser Text wird in Kleinbuchstaben ausgegeben.
</div>

Jeder Anfangsbuchstabe wird großgeschrieben.

<div class="text-capitalize">
  Jeder Anfangsbuchstabe wird großgeschrieben.
</div>

... Listen ...

Nummerierte Liste

  1. Informationen reduzieren
  2. Code mehrfach verwenden
  3. Vorhandene Materialien nutzen

Unnummerierte Liste

  • Informationen reduzieren
  • Code mehrfach verwenden
  • Vorhandene Materialien nutzen