Die Komponenten stellen neben den gängigen Elementen diverse Helfer zur Verfügung. Bei ihnen handelt es sich meistens um CSS-Klassen, die in den verschiedensten Fällen zum Einsatz kommen. Im Folgenden werden diese Helfer kurz mit Einsatzzweck und Beispiel vorgestellt.

Clearfix

Die CSS-Klasse .clearfix ist dafür zuständig, CSS-Floatings aufzuheben. Sie wird in der Regel auf das umgebende HTML-Element angewendet:

Ich bin links
Ich bin rechts

Ich folge wieder der normalen Anordnung

<div class="clearfix">
  <div style="float: left;">Ich bin links</div>
  <div style="float: right;">Ich bin rechts</div>
</div>
<p>Ich folge wieder der normalen Anordnung</p>

Elemente verstecken und Zeigen

Sollen Elemente gänzlich verschwinden, hilft die CSS-Klasse .hidden. Sie versteckt Elemente auch vor Screen-Readern.

<button type="button" class="hidden">Unsichtbar</button>

Elemente Responsiv verstecken

Sollen Elemente responsiv verschwinden, helfen die CSS-Klassen .hidden-{screenklasse} & .visible-{screenklasse}-{displaytyp} sie sind für die Screenklassen 's', 'm', 'l', 'xl' und die Displaytypen 'block', 'inline' und 'inline-block' verfügbar. Die Klassen .hidden-{screenklasse} versteckt das Element nur in der angegeben Screenklasse! Die Klassen .visible-{screenklasse}-{displaytyp} zeigt das Element nur in der angegeben Screenklasse! Beide Klassen versteckten die Elemente auch vor Screen-Readern.

Sichtbar auf
X-Large
Large
Large
Medium
Medium
Small
Small
Kombiniert Sichtbar auf
XL und S
L und M
L und M
XS und M
XL und L

Inhaltsseparatoren

Oft müssen Gruppen von Inhalten visuell separiert werden - hierzu bringen die Componenten Inhaltsseparatoren mit. Sie beinflussen den horizontalen Abstand von Elementen in einer Spalte. Für elemente kann auch ein umschliesendes Div verwendet werden. Separatoren werden von 6-18 Rastereinheiten angeboten:

**Anmerkung:** Inhalte innerhalb des Inhaltsseparators werden unten ausgerichtet!

Separiert mit 8BU

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Separiert mit 6BU

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<div style="border: 1px solid #eee;">
  <div class="cont-sep-8">
    <h1 class="underline">Separiert mit 8BU</h1>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
  <div class="cont-sep-6">
    <h1 class="underline">Separiert mit 6BU</h1>
  </div>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
  </div>

Abstandshelfer

Oft benötigen Elemente zusätzlichen Platz, um hervorgehoben oder eingepasst zu werden. Um im vorgegebenen Gestaltungsraster zu bleiben, bringen die Komponenten Abstandshelfer mit. Sie beeinflussen jeweils die margin-Eigenschaft des Elements, auf das sie angewendet werden. Die CSS-Klasse entscheidet, welches margin mit welchem Wert beeinflusst wird offset-{screenklasse}-{ausrichtung}-{rastereinheiten}. Aktuell gibt es die Screenklassen 's', 'm', 'l', 'xl' und Ausrichtungen top, right, bottom, left. Es werden jeweils 1-10 Rastereinheiten angeboten:

5 Rastereinheiten nach rechts
<div style="border: 1px solid #eee;">
  <div class="offset-left-5 offset-l-left-5 offset-m-left-10">5 Rastereinheiten nach rechts</div>
</div>

Zentrierhelfer

Oft müssen Elemente in einer Spalte Zentriert werden - hierzu bringen die Componenten Zentrierhelfer mit. Sie beinflussen die horizontale Ausrichtung von Elementen in einer Spalte. Hierfür wird jedoch ein umschliesendes Div benötigt.

<div style="border: 1px solid #eee;">
  <div class="h-ctr">
        <button type="button" class="btn btn-default">Standard</button>
  </div>
</div>
<div style="border: 1px solid #eee; height: 100px">
  <div class="h-ctr v-ctr">
        <div>
                <button type="button" class="btn btn-default">Standard</button>
         </div>
  </div>
</div>