YouTip

In this chapter, we will learn how to create forms using Bootstrap. Bootstrap can create different styles of forms through some simple HTML tags and extended classes. Form elements , , and elements are set to 100% width when using the .form-control class. ### Bootstrap5 Form Layout * Stacked Forms (full width): vertical direction * Inline Forms: horizontal direction Bootstrap provides two types of form layouts: * * * ## Stacked Forms The following example uses two input boxes, a checkbox, and a submit button to create a stacked form: ## Example <div class="mb-3 mt-3"><label for="email" class="form-label">Email:</label></div><div class="mb-3"><label for="pwd" class="form-label">Password:</label></div><div class="form-check mb-3"><label class="form-check-label"> Remember me </label></div><button type="submit" class="btn btn-primary">Submit</button> [Try it yourself »](#) Display effect: !(#) In the example, we use the .form-label class to ensure the label element has some padding. Checkboxes use different markup. They are wrapped in a container element using .form-check. Checkboxes and radio buttons use .form-check-input, and their labels can use the .form-check-label class. * * * ## Inline Forms If you want form elements to display side by side, use .row and .col: The following example displays two input boxes side by side to create an inline form: ## Example <div class="row"><div class="col"></div><div class="col"></div></div> [Try it yourself »](#) Display effect: !(#) ## Textarea Use the textarea tag to create a text area for form submission, and use the .form-control class to render the textarea: ## Example <label for="comment">Please enter a comment:</label><textarea class="form-control" rows="5" id="comment" name="text"> [Try it yourself »](#) Display effect: !(#) * * * ## Input Size We can set the input size by using the .form-control-lg or .form-control-sm class in **.form-control** inputs: ## Example [Try it yourself »](#) Display effect: !(#) * * * ## Disabled/Readonly Form Use the disabled/readonly attribute to set the input as disabled/readonly: ## Example [Try it yourself »](#) * * * ## Plaintext Input Use the .form-control-plaintext class to remove the border from the input: ## Example [Try it yourself »](#) * * * ## Color Picker Use the .form-control-color class to create a color picker: ## Example [Try it yourself »](#) Display effect: !(#)