Simple Bootstrap Form Layout Examples

Forms are a very important part of web pages and applications. Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

You can create a beautiful HTML input control layout using bootstrap. You can style and alignment of form controls like input fields, labels, text areas, etc using bootstrap CSS classes.

Bootstrap is a popular front-end framework used to design responsive and mobile-first web pages. One of the many benefits of using Bootstrap is its built-in support for forms.

Bootstrap provides a wide range of classes that allow developers to create stylish and functional forms quickly and easily.

In this article, we will explore some simple Bootstrap form layout examples that you can use in your web projects. I am also using fieldset control for classy form design.

Bootstrap provides three types of form layouts

Vertical form (default)
Horizontal form
Inline form

Also Checkout other useful jQuery tutorials,

Bootstrap Vertical Form Layout

This is the default Bootstrap form layout. You don’t need any additional classes in the form or input fields. The form controls in this layout are aligned left with stacked labels and HTML input fields.

<fieldset class="scheduler-border"><legend class="scheduler-border">Bootstrap Vertical Form</legend><form>
<div class="form-group"><label for="formGroupExampleInput">Example label</label> <input id="formGroupExampleInput" class="form-control" type="text" placeholder="Example input"></div>
<div class="form-group"><label for="formGroupExampleInput2">Another label</label> <input id="formGroupExampleInput2" class="form-control" type="text" placeholder="Another input"></div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-7 pull-right"><button class="btn btn-primary" type="submit">Sign in</button></div>
</div>
</form></fieldset>

In this above code, the form-group class is used to wrap the label and form control elements together. The form-control class is used to style the input fields and textareas.

Bootstrap In-line Form Layout

Bootstrap provides inline form using bootstrap css classes. You need to make sure screen view-ports at least 768px, in bootstrap inline form all labels and input fields are left-aligned.

You need to add the bootstrap css class .form-inline into the form element class attribute.

<fieldset class="scheduler-border"><legend class="scheduler-border">Inline Form</legend><form class="form-inline">
<div class="form-group"><label for="exampleInputName2">Name</label> <input id="exampleInputName2" class="form-control" type="text" placeholder="Jane Doe"></div>
<div class="form-group"><label for="exampleInputEmail2">Email</label> <input id="exampleInputEmail2" class="form-control" type="email" placeholder="[email protected]"></div>
<button class="btn btn-primary" type="submit">Send invitation</button></form></fieldset>

Bootstrap Horizontal Form Layout

The Bootstrap horizontal form contains labels along with input fields in a single row. You need to add the below bootstrap classes to create a Bootstrap horizontal form.

Add class .form-horizontal to the form element
Add class .control-label to all label elements

<fieldset class="scheduler-border"><legend class="scheduler-border">Bootstrap Horizontal Form</legend><form class="form-horizontal">
<div class="form-group"><label class="control-label col-sm-2" for="formGroupExampleInput">Name</label>
<div class="col-sm-10"><input id="formGroupExampleInput" class="form-control" type="text" placeholder="Jane Doe"></div>
</div>
<div class="form-group"><label class="control-label col-sm-2" for="formGroupExampleInput2">Email</label>
<div class="col-sm-10"><input id="formGroupExampleInput2" class="form-control" type="email" placeholder="[email protected]"></div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-7 pull-right"><button class="btn btn-primary" type="submit">Sign in</button></div>
</div>
</form></fieldset>

In this above code, the form-horizontal class is added to the form element to indicate that this is a horizontal form. The control-label class is used to style the label element, and the col-sm-* classes are used to specify the width of the label and form control columns.

Bootstrap 2-column Form layout

Below is simple Bootstrap 2-column form layout using basic CSS classes. I am using the bootstrap Vertical Form layout and divided a single row into half of the viewport. Please make sure the viewports at least 768px.

<fieldset class="scheduler-border"><legend class="scheduler-border">Bootstrap Two Column Form Layout</legend><form>
<div class="row">
<div class="col-xs-6 form-group"><label>User ID</label> <input class="form-control" type="text"></div>
<div class="col-xs-6 form-group"><label>Emp Id</label> <input class="form-control" type="text"></div>
<div class="col-xs-6">
<div class="row"><label class="col-xs-12">Full Name</label></div>
<div class="row">
<div class="col-xs-12 col-sm-6"><input class="form-control" type="text" placeholder="first Name"></div>
<div class="col-xs-12 col-sm-6"><input class="form-control" type="text" placeholder="last Name"></div>
</div>
</div>
<div class="col-xs-6 form-group"><label>Salary</label> <input class="form-control" type="text"></div>
</div>
</form></fieldset>

You can download the source code and Demo below the link.

Live Demo

Download Source Code