+91 90691 39140 | +1 253 214 3115 | info@hub4tech.com | hub4tech

Bootstrap Forms Video


Bootstrap's Default Settings

Form controls automatically receive some global styling with Bootstrap: All textual < input >, < textarea >, and < select > elements with class .form-control have a width of 100%.

Bootstrap Form Layouts

Bootstrap provides three types of form layouts i.e. Vertical form (this is default), Horizontal form, Inline form.

Bootstrap Vertical Form (default)

The following example creates a vertical form with two input fields, one checkbox, and a submit button:
Bootstrap Vertical Form

By default vertical form is included while using bootstrap framework.
Code for Vertical Form
Code for Vertical Form

Bootstrap Inline Form

In an inline form, all of the elements are inline, left-aligned, and the labels are alongside.
Bootstrap Inline Form

Bootstrap Forms

Additional rule for an inline form:
  • Add class . form-inline to the < form > element
The following example creates an inline form with two input fields, one checkbox, and one submit button:

Bootstrap Horizontal Form

A horizontal form stands apart from the other forms both in the amount of markup, and in the presentation of the form. Additional rules for a horizontal form:
  • Add class .form-horizontal to the < form > element
  • Add class . control-label to all < label > elements
The following example creates a horizontal form with two input fields, one checkbox, and one submit button:
Bootstrap Horizontal Form

Bootstrap Forms



Is it Helpful?
Copyright ©2015 Hub4Tech.com, All Rights Reserved. Hub4Tech™ is registered trademark of Hub4tech Portal Services Pvt. Ltd.
All trademarks and logos appearing on this website are the property of their respective owners.
FOLLOW US