Learning Bootstrap

• Part 1: Installing and Using
• Part 2: Containers and Rows
• Part 3: Grids
• Part 4: Working with jQuery Plugins

Using Bootstrap

• Part 1: Borders and Colors
• Part 2: Alerts
• Part 3: Buttons
• Part 4: Cards
• Part 5: Forms

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!