Horizontal Forms

  1. Home
  2. Form Layouts
  3. Horizontal Forms

Basic Example

This is one column basic horizontal form with labels on left and form controls on right in one line. Add .form-horizontal class to the form tag to have horizontal form styling.

Project Details

Horizontal Form With Icon

Define the position of the icon using has-icon-left or has-icon-right class. Use icon-* class to define the icon for the form control. See Icons sections for the list of icons you can use.

$
.00

2-Columns Horizontal Form

This is 2-columns horizontal form with labels on left and form controls on right in one line. Add .form-horizontal class to the form tag to have horizontal form styling. User can also change the border color and background color of the form control. Add border-* class to change border color and bg-* class to change background color of the form control.

Employee Details

Center Aligned Horizontal Form

Add .form-horizontal class to the form tag to have horizontal form styling. This is horizontal form demo with centered card. Here we have used row justify-content-center classes to center the card as its not full width. User can always change those classes according to width and offset requirements.

Try Layout Builder