Bootstrap makes it easy to style different types of forms with the simple HTML markup and extended classes. Bootstrap provides three types of form layouts:

1. Vertical form (default)
2. In-line form
3. Horizontal form

<form role = "form">

 <div class = "form-group">
 <label for = "name">Name</label>
 <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
 </div>
 
 <div class = "form-group">
 <label for = "inputfile">File input</label>
 <input type = "file" id = "inputfile">
 </div>
 
 <div class = "checkbox">
 <label><input type = "checkbox"> Check me out</label>
 </div>
 
 <button type = "submit" class = "btn btn-default">Submit</button>
</form>

Basic Form

To create a basic form, you need to do the following:

1. Add a role form to the parent <form> element.
2. Wrap labels and controls in a <div> with class .form-group. This is needed for optimum spacing.
3. Add a class of .form-control to all textual <input>, <textarea> and <select> elements.

Inline Form

To create a form where all of the elements are inline, left aligned and labels are alongside, add the class .form-inline to the <form> tag.

Horizontal Form

To create horizontal form, add class .form-horizontal to the <form> element. Also, add class .control-label to all <label> elements.

Form Control in Bootstrap 4

In bootstrap 4, you are not required to add a role form to the parent <form> element.

Textual form controls like <input>, <select>, and <textarea>, are styled with the .form-control class. For file inputs, change the .form-control for .form-control-file.

You can set the height using classes like .form-control-lg and .form-control-sm.

Read Only Input

Add the readonly boolean attribute on an input to prevent modification of value of the input. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

Checkbox and Radio

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. By default, any number of checkboxes and radios that are immediate sibling are vertically stacked and appropriately spaced with .form-check.

You can group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.