Web Development Lecture 6: Bootstrap Forms

Bootstrap Forms

• 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.

Bootstrap Checkboxes

• 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.

Bootstrap Radio Buttons

• 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.

Bootstrap Input Groups

• 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".

Bootstrap Forms Styling

• All textual and elements with class .form-control get proper form styling.
• Add a .form-label class to each label element to ensure correct padding.

Bootstrap Form Layout

• 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.