Bootstrap Forms | Explained – Linux Consultant

February 17, 2023 | by Arround The Web | No comments

Bootstrap Forms | Explained

Bootstrap forms are a crucial part of any application. They enable user interaction and input into the system. Several Bootstrap classes provide pre-designed form controls and styling options to create responsive and clean forms. More specifically, Bootstrap forms consist of various form elements, such as text fields, text areas, radio buttons, select boxes, and more.

This write-up will cover:

How to Create an Inline Form in Bootstrap?

Inline forms are created using the “.form-inline” class. This class has a pre-defined CSS “display” property with the value “flex” with other properties.

Example

Check out the example that demonstrates how to create an inline form in Bootstrap:

First, add a “<form>” element with the class “form-inline”.
Within it, add two “<div>” elements with the “form-group” class.
Each “<div>” element contains the “<label>” and “<input>” elements.
Lastly, add a “<button>” element to create a button:

<label for="email">Email</label>

</div>

<label for="pwd">Password</label>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

Output

How to Set Spacing in Inline Form?

The Bootstrap spacing utilities adjust the spacing of an inline form. These include “ml-*” for margin-left, “mr-*” for margin-right and many more. The “*” represents the size.

For a practical demonstration, check out the example below.

Example

In the ongoing example, add the class “ml-2” to the “<label>” element. It will generate space at the left of the label:

<label for="email" class="ml-2">Email</label>

</div>

<label for="pwd" class="ml-2">Password</label>

<button type="submit" class="btn btn-primary ml-2">Submit</button>

</form>

Output

How to Create a Stacked Form in Bootstrap?

The stacked forms refer to the vertical forms. This is a default form.

Check out the example below.

Example

Follow the given instructions to create a vertical form:

Add a “<form>” element.
Inside it, add a “<div>” tag and assign it a class “form-group”.
This “<div>” element contains the “<label>” and “<input>” elements. You can add the form elements according to your preferences.
At the end, add a “<button>” to the form:

<form>

<label for="email">Email</label>

</div>

<label for="pwd">Password</label>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

Output

How to Create a Form Using Grid Rows?

To make a form using Bootstrap grid is very simple. First, specify a row and create columns for the form inputs inside it.

Analyze the example below.

Example

Follow the instructions to create a form using Bootstrap grid:

Add a “<form>” element.
Inside it, add a “<div>” container with the class “row”.
Inside this “row” container, specify two more “<div>” elements with the “col” class.
Add the “<label>” and “<input>” elements within each “<div>” element:

<form>

</div>

<label for="email">Email</label>

</div>

</form>

Output

How to Create a Compact Layout Form?

For compact and tighter layouts, the “form-row” class is utilized instead of the “row” class:

<form>

</div>

<label for="email">Email</label>

</div>

</form>

Output

How to Create a Horizontal Form?

The horizontal forms are created by using the “row” and “col-*-*” classes. The “row” class specifies a row, and the “col-*-*” classes define the width of labels and controls, such as “col-sm-2”, “col-md-6” or more. The “col-form-label” must also be added to the “<label>” element.

Example

To create a horizontal form, try out the given instructions:

First, add a “<form>” element.
Within it, add a “<div>” element with the classes “form-group” and “row”.
Specify the form groups within this “<div>” element. In our case, the “<label>” and the “<input>” elements are specified.
The “<input>” element is placed within another “<div>” having class “col-sm-6”. It will specify 6 grid columns for the “<input>” element:

<form>

</div>

<label for="add" class=" col-form-label col-sm-2">Address</label>

</div>

<button type="submit" class="btn btn-primary ml-2">Submit</button>

</form>

Output

How to Adjust the Label Sizing of Form?

The size of the “<label>” element can be adjusted easily by using the “col-form-label-sm” and “col-form-label-lg”. The “col-form-label-sm” has a predefined CSS “font-size” property with the value “0.875rem” with other properties. The “col-form-label-lg” has a predefined CSS “font-size” property with the value “1.25rem” with other properties.

Example

In the ongoing example, add the “col-form-label-sm” to the first “<label>” element and “col-form-label-lg” to the second one to see the difference:

<form>

</div>

<label for="add" class="col-form-label-lg col-sm-2">Address</label>

</div>

<button type="submit" class="btn btn-primary ml-2">Submit</button>

</form>

Output

You have successfully learned about how to create forms using Bootstrap.

Conclusion

Bootstrap offers a simple method for producing responsive and consistent forms. There are mainly three types of Bootstrap forms: inline, stacked, and horizontal forms. An inline form is created using the “form-inline” class. To specify general styles to the group of form controls, the “form-group” class is used. More specifically, there are several classes that help in adjusting the size of the form components, such as “col-sm-4”, “col-form-label-sm”, and many more. This write-up has demonstrated how to create forms using Bootstrap.

Source: linuxhint.com