Zeilenabstand in Bootstrap-Formularen verringern

Erstellt man mit Bootstrap 4 ein Formular, werden recht großzügige Abstände zwischen den Zeilen des Formulars eingefügt.

Der Standardabstand:

Ein Blick in den Webinspektor verrät, dass es sich hier bei der Gruppe um eine “form-group” handelt.

In dieser wird der Abstand mittels CSS realisiert.

Diesen können wir nun auf 0 setzen, andere Maßeinheiten sind natürlich auch möglich.

.form-group {
	margin-bottom: 0rem !important;
}

Dies verringert den Abstand bereits etwas, wie das Beispiel zeigt:

Wer den Abstand weiter verringern möchte, kann dies mit negativen Werten erreichen.

.form-group {
	margin-bottom: -20px !important;
}

Vorlage in DA-FormMaker einbinden

Mit der Software DA-FormMaker erstellen Sie leicht Bootstrap-Formulare, auch hier kann die Änderung schnell in den erweiterten Einstellungen vorgenommen werden.

Hier können wir nun den folgenden Code in den Head-Bereich einfügen:

<style type="text/css">
.form-group {
    margin-bottom: -20px !important;
}
</style>

Fertig! Diese Einstellung wird nun bei jedem Export berücksichtigt.

Kommentar hinterlassen

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