Formulare in Bootstrap verwenden - Eine Anleitung

Diese Seite gibt dir Tipps für die einfache Gestaltung von Formularen mit dem CSS Framework Bootstrap.

Das Bootstrap Framework bietet verschiedene CSS-Klassen, um ein Formular einzubinden und einzelne Formularfelder (z. B. ein Textfeld) vorzuformatieren.

Vorgefertigte Formulartypen

Folgende Formulartypen können verwendet werden.

Beispiel Horizontales Formular

Beispiel Inline-Formular

Anpassen der Größe von Eingabefeldern

Alle Eingabefelder des Formulares können in verschiedenen Größen dargestellt werden. Nutze dafür die folgenden CSS-Klassen.

• .input-lg für ein größeres Eingabefeld
• .input-sm für ein kleineres Eingabefeld

Beispiel Größe der Eingabefelder anpassen

Eingabefelder erweitern

Ein tolles Features ist die Erweiterung von Formularfeldern. So können z. B. beim Abfragen von Beträgen oder  Datumsangaben einfach die Einheiten mit im Eingabefeld angezeigt werden. Daf+r sind lediglich zwei zusätzliche CSS-Klassen notwendig.

• Das Eingabefeld wird ein DIV mit der Klasse .input-group gepackt
• Die Erweiterung wird mittels .input-group-addon vor oder nach dem Eingabefeld eingefügt

Beispiel Eingabefelder erweitern