Advantages of Bootstrap
- by Parlae Solutions Developer
- August 2015
If you would like to utilize all of the several advantages of Bootstrap listed above then click on the provided link below, which will provide the necessary files to download and explicit documentation on how to implement the framework into your solution.
One may use Bootstrap on the forms in their website or web application to simplify the process of styling and aligning all of the controls within the forms. Some of the controls that can be styled and aligned are labels, textboxes, radio buttons, checkboxes, dropdown menus, textareas, and buttons. These controls are styled by a predefined set of classes. Bootstrap forms can be inline, horizontal, or vertical. Notice the different alignments of each form.
With Bootstrap’s built in responsive functionality the forms will automatically collapse and expand as the screen is resized. Take a look at a horizontal form above, notice that its divs and labels have classes like col-sm-2 and col-sm-10 on them? Well these are used to set the width of the controls on the form. In a Bootstrap row, there is a minimum and a maximum of 12 columns, meaning that no matter how many controls you have in a row, their col-md-## must add up to a row. A control can be only one column or can take up the full 12 columns. When the screen is resized the columns push to full width, collapsing the controls and labels underneath each other. So basically the horizontal form will turn into a vertical form once the screen shrinks to the predetermined width. Here is an image of a horizontal form at full width and one at mobile width.
The Bootstrap classes can be used on the controls not only to style and align but for validation purposes too. Controls that have failed validation will have a class added to their form-group called, “has-error”. The control or controls and their associated labels that has failed validation will have a red border and red font, like so:
FORM WITH FAILED VALIDATION
Controls that have failed validation will have a class added to their form-group called, “has-success”. The control or controls and their associated labels that has failed validation will have a green border and green font, like so:
FORM WITH SUCCESS
If you are looking for a quick, simple, and reliable way to add style, validation, and alignment the forms on your website or web application click here to get started with Bootstrap -> http://getbootstrap.com/. Some of the images above were captured from w3schools, to obtain more information go to their site -> http://www.w3schools.com/bootstrap/bootstrap_forms.asp.
Please share if you thought this post was worth reading!