Bootstrap Vertical, Horizontal, and Inline Form

Bootstrap form layout vertical form, horizontal form, and inline form will be discussed in this article. Forms are an essential part of almost every website to collect user input data. In this article, we will learn how to create a form using the Bootstrap CSS framework. We are cover both Bootstrap 3 and bootstrap 4 forms layout.

Bootstrap 4 Form Layouts
Bootstrap provides two types of form layouts. Moreover, you can create a horizontal layout using Bootstrap 4 helper class:

1. Stacked form (full-width form) - Use form-group class in wrapper element and each form elements add .form-control class to create stacked structure.
2. Inline form - To create inline form add form-inline class to the element. Moreover, all form elements are left-aligned with screen view-ports at least 576px wide. Below 576px screen, it will be stacked automatically.
3. Horizontal Custom Form - All labels and form controls use col-md-* to make a two-column horizontal layout. And it will wrap between between form-group and row class <div> container. All labels and input fields are left-aligned in single row.

Bootstrap 3 Form Layouts
Bootstrap provides three types of form layouts:

1. Vertical form (this is the default) - This is the default Bootstrap form layout in which all input fields and labels are vertically aligned. There is no need any extra Bootstrap class applied on form and their child elements. Let’s create a simple Vertical form layout.
2. Horizontal form - To create a horizontal form, all labels and input fields are left-aligned in a single row. Only you need to add a form-horizontal class in <form> element. And all labels and form controls use col-md-* to make a two-column horizontal layout. Quickly check the horizontal form layout.
3. Inline form - All form elements are left-aligned with screen view-ports at least 768px wide to applies. You need to add additional class form-inline to the <form> element. Let’s see the Bootstrap 3 inline form layout.

Notes:

1. Bootstrap control-label and form-control classes are used to style the labels and form elements respectively.
2. To control the textbox sizes you can use input-lg and input-sm classes.