Web Development Lecture 6: Bootstrap Forms

Study Notes

To style a select menu in Bootstrap 5, add the .form-select class to the element.
To change the size of the select menu, use .form-select-lg or .form-select-sm.
To disable a select menu, use the disabled attribute.

To style checkboxes, use a wrapper element with class form-check to ensure proper margins for labels and checkboxes.
Add the .form-check-label class to label elements, and .form-check-input to style checkboxes properly inside the .form-check container.
Use the checked attribute if you want the checkbox to be checked by default.
To style a checkbox as a toggle switch, use the .form-switch class together with the .form-check container.

Radio buttons are used if you want to limit the user to just one selection from a list of preset options.
Use the same markup as for checkboxes, but for radio buttons.

The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text".

To make form elements appear side by side, use .row and .col.
Use .form-control-lg or .form-control-sm to change the size of form inputs.
To style an input with type "color" properly, use the .form-control-color class.
To disable an input field, use the disabled attribute.
To make an input field read-only, use the readonly attribute.
To style an input field without borders, but keep proper margins and padding, use the .form-control-plaintext class.