Bootstrap 3 Forms Tutorial

Forms are essential for web applications, one can see them while logging in an application, editing a profile or registering for an account. Bootstrap greatly simplifies form styling by providing special style classes and providing automatic styling of form controls. To learn how to style forms and form controls we’ll discuss a registration form shown below.

The code for this form as well as live demo could be seen on Bootsnipp. First things first, let’s review a basic form template.

A form is placed in a .container for proper formatting. Then, in line 3 an HTML form tag is seen with a class .form-horizontal and a role form. The former is used to produce a form with labels, such as “Password” in the above image, that are on the same line as inputs, the latter is to describe meaning of the element, for example, an anchor tag can be styled to look like a button, in this case a role attribute tells that the anchor is used for playing a button’s role. After that, in line three and seven there are divs with a .form-group class which are used to wrap form controls, for example, the label “Password” and the input field for password are wrapped in such a div as well as other controls on the form.

It should be mentioned, that labels are important not only for providing visual information about the purpose of a form control, but also to communicate such information to people who use screen readers. If it is urgent that the space on the screen be saved, one can use .sr-only class for a label, which means “only for screen readers, don’t display it”. It is advisable that labels should not be omitted altogether, but rather switched off in visual representation.

An important point to notice is that when a div with a .form-group class is placed inside a .horizontal-form div, the former behaves like a .row class, that is one can use .col-*-* classes inside this div without adding a .row class explicitly. Now it’s time to cover the complete code for a registration form example.

It could be seen, that there are some general traits for the form controls, such as all labels have a .control-label class which is used for proper label formatting and all text inputs like password or date input fields are styled with a .form-control class that helps to stretch these controls to 100%. Other common traits include labels having .col-*-* classes in order to allocate horizontal space for them and input controls are wrapped into div with .col-*-* class for the same purpose. Most text inputs also have a placeholder attribute which is a source of the muted text inside a textbox such as “Email” to provide a user with a clue of the purpose of a field when its label is not displayed.

Please notice, that labels are correlated to controls they describe using a for attribute, the value of which is the same as the one of the id attribute of the corresponding input control. Various HTML5 input controls can be used in Bootstrap forms, for example, text to input a name, email for e-mails, etc.; to display most of these controls an input tag is used with additional type attribute which defines behavior of the control, such as display the same symbol for a password field or a date chooser for a date field. Also a type of the field influences on how validation works.

The first line of input in the form contains an additional element with a class .help-block, which is a line below a Full Name input field, containing instructions. The select tag on line 32 is used to render a drop-down list of countries. Then, on lines 49, 54 and 59 there is a code to display radio buttons. To do this inputs with type "radio" are wrapped by label tags with a .radio-inline class. In this case labels do not have a for attribute, because they correspond to the element they wrap. A text for a radio button, which is displayed, is after the closing bracket of the input tag. The .radio-inline class is used to display radio buttons on the same line.

Below radio buttons there is a group of two checkboxes. In contrast to the aforementioned radio buttons, the checkboxes are stacked. The code looks pretty much like the one for radios, but the difference is that label classes are .checkbox which tells the browser to first, display a checkbox and second, to stack checkboxes if there are more than one. If one’s intention is to put the boxes on the same line, a .checkbox-inline class should be used. The similar thing with radio buttons, to stack them it’s necessary to use a .radio class instead of .radio-inline.

The final control on the form is a button which is placed into the form’s grid using an eponymous tag. The button is styled using three classes. The first, .btn, contains general button styles, the second, .btn-primary, colors the button and the third, .btn-block, makes the button to span the full width of its parent, a grid cell in our case. It is seen from the example that the Bootstrap framework is extremely convenient for styling forms. In the following post controls demanding scripts to operate, such as tabs and pagination, will be discussed.