Let’s see into the details of the code above. Any HTML form begins with a form tag. In this example our form controls will spread across horizontally, so we have to use the bootstrap CSS class “form-horizontal”

Bootstrap uses a div tag with a CSS class, called “form-group” to wrap the input controls and the labels. This is similar to grouping controls into a container and it manages the default padding which you can change any time by adding an overriding class. If you observe the label tag within the “form-group” div, it contains two CSS classes called “control-label” and “col-md-4”. These two classes control the label layout. The “control-label” CSS class is responsible for label styles and “col-md-04” responsible for size and padding.

When we consider the user name input control it consists of only the CSS class called “form-control”. It controls all the styles of input text box, but the input control is wrapped in a div tag with a CSS class called “col-md-8”. This wrapping div control the size of the input control. According to the bootstrap grid system you can have maximum 12 columns in a row. So, you can use any combination to split sections in layout. Here, we use column 4 and column 8 to size the label and input text. Once you refresh you page, the resulting output will look like as follows;