Eingabefelder in Bootstrap - Überblick ☼ BootstrapWorld.de

Eingabefelder in Bootstrap - Überblick zum Ausprobieren und Weiterverwenden

Neben dem Suchformular lassen sich auch einzeilige Inline-Formular mit Twitter Bootstrap sehr leicht umsetzen. Einfach die Klasse "form-inline" im form-Element vergeben und Eingabefelder werden linksbündig auf einer Zeile angeordnet.

Weitere Beispiele:

Frage stellen

<div class="container"> <div class="col-md-8"> <form>  <div class="form-group"> <label for="input1">Labelname für ein Textfeld (einzeilig)</label> <input type="text" class="form-control" id="input1" placeholder="Bitte etwas eingeben..."> </div>  <div class="form-group"> <label for="input2">Passwortfeld</label> <input id="input2" class="form-control" type="password"> </div>  <div class="form-group"> <label for="input3">Mehrzeiliges Textfeld (kurz)</label> <textarea id="input3" class="form-control" rows="3"></textarea> </div>  <div class="form-group"> <label for="input4">Auswahlfeld</label> <select id="input4" class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div>  <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Radiobutton </label> </div>  <div class="checkbox"> <label> <input type="checkbox"> Checkbox </label> </div>  <button type="submit" class="btn btn-primary btn-lg">Großer CTA Button</button> </form> </div> </div>

Hast du eine Frage zu dieser Seite?

Dein Name:

Deine Frage:

Deine E-Mail: (für Rückfragen / Antwort)

Ja, ich möchte über neue Bootstrap Tutorials und Scripte informiert werden.

Spamschutz: (bitte Aufgabe lösen)

Webseite (bitte das nachfolgende Feld unbedingt frei lassen, wird gegen Spam-Bots verwendet)

Fragen anderer Besucher zum Thema "Eingabefelder in Bootstrap - Überblick..."

Katharina Haberling fragt

Wie kann ich diese Bootstrap-Vorlage (Eingabefelder) Responsive machen?

Antwort von BootstrapWorld.de

Hallo Katharina,

das passiert automatisch. Du musst nichts machen, denn die Formularfelder werden automatisch auf 100% Breite gezogen und füllen dann auch auf dem Smartphone den ganzen Platz aus.

Schaue dir bitte als Beispiel folgendes Formular an:
https://www.bootstrapworld.de/snippet/horizontales-formular

Viele Grüße

Andreas

BootstrapWorld.de nutzt Cookies, um euch die bestmögliche Funktionalität zu bieten.
Details ansehen