Styling forms with Bootstrap

Bootstrap provides a number of classes to assist in styling form elements.

The main thing you will need to do to take advantage of form styling is to add the class form-control to all form controls and the class form-label to all label elements in a form.

Simple Example Page

First example

Click the button above to go to a page that demonstrates a simple use of Bootstrap form styles. The default behavior in Bootstrap form styling is to lay out labels and elements in a vertical sequence.

Special elements such as radio buttons will require a little bit of extra structure: see the example above for details.

This example also demonstrates the use of a fieldset element. In this example I used a fieldset to put a border around the form. The p-3 class in the fieldset element is a Bootstrap padding class, which puts extra padding around each element in the form. This helps separate the form contents from the border that runs around the fieldset.

Grid Example Page

Second example

Click the button above to go to a page that demonstrates a more complex use of forms. In this example I used the Bootstrap grid classes, such as row and the column classes, to organize the form elements into a grid. This is necessary if you want to position labels next to input elements instead of above them.

More information

Complete information on form styling in Bootstrap is available in the official documentation online.