Using Bootstrap: Part 5: Forms

Learning Bootstrap

Using Bootstrap

Bootstrap is a free and open-source front-end framework for designing HTML- and CSS-based applications.


Forms

In Bootstrap 4, the existing HTML Form element should contain other elements with the class form-group. Within these elements should be at least two others, a label element and the input element with which it is paired.

Label elements should have an attribute for with the same value as the id of the input element with which they are associated. Such labels help with not only assistive technology, but can visually differentiate the different input elements.

Form Control

To help with styling elements, Bootstrap supplies the form-control class. HTML elements like Input, Textarea, and Select should use this class to help with consistent styling. The class form-control-file should be used for Input element with the type “file.”

Form Sizes

Bootstrap also supplies three sizes to use in conjunction with the form-control class: form-control-lg (large), form-control (default), and form-control-sm (small).

Form Grid

Like other elements, forms can also use the grid system in Bootstrap. Within a Form element, the use of the classes row and col can be used to create the same grid layout.

Play with the example on Repl.it!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.