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.
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.
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.
Complete information on form styling in Bootstrap is available in the official documentation online.