Bootstrap 5 Layout Forms
Bootstrap 5 Layout forms provide control of the input field and custom positioning. All the fields should be placed inside the <form> tag. By default the form is aligned vertically as the default value for display is block and is set to 100%. We can use additional classes to change this default placement
Bootstrap 5 Layout Forms Classes: There are no classes to make a layout form but we can use some classes to change the alignment of forms.
Bootstrap 5 Layout Forms Tags:
- form:- Every form element is enclosed within this tag
- button:- It is used for creating a button inside a form. By default, it is set to submit type.
Bootstrap 5 Layout Forms Attributes:
- disabled: It can be used to disable the entire form or just a few elements.
Syntax:
<form> <div class = row|mb-*|col-*> <label for="exampleInput" class="form-label"> ... </label> <input type="text" class="form-control" id="exampleInput"> </div> </form>
The “*” can be replaced by an integer value from 0-12.
Example 1: In this example, the form will be displayed in a vertical layout which is the default layout.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body class = "m-3" > < h1 class = "text-success" > w3wiki </ h1 > < h4 > Bootstrap 5 Layout Forms </ h4 > < form > < div class = "mb-3" > < label for = "nameInput" class = "form-label" > Name </ label > < input type = "text" class = "form-control" id = "nameInput" > </ div > < div class = "mb-3" > < label for = "emailInput" class = "form-label" > Email </ label > < input type = "email" class = "form-control" id = "emailInput" > </ div > < button type = "submit" class = "btn btn-primary" > Sign in </ button > </ form > </ body > </ html > |
Output:
Example 2: In this example, the form will be displayed in a horizontal layout using .row class and .mb class. Also, we will use the disabled attribute to make a button disabled.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body class = "m-3" > < h1 class = "text-success" > w3wiki </ h1 > < h4 > Bootstrap 5 Layout Forms </ h4 > < form > < div class = "row mb-3" > < label for = "inputName" class = "col-sm-2 col-form-label" > Name </ label > < div class = "col-sm-10" > < input type = "text" class = "form-control" id = "inputName" > </ div > </ div > < div class = "row mb-3" > < label for = "inputemail" class = "col-sm-2 col-form-label" > Email </ label > < div class = "col-sm-10" > < input type = "email" class = "form-control" id = "inputemail" > </ div > </ div > < div class = "row" > < div class = "col-sm-10 offset-sm-2" > < button type = "submit" class = "btn btn-primary" disabled> Registered </ button > < button type = "submit" class = "btn btn-primary" > Sign in </ button > </ div > </ div > </ form > </ body > </ html > |
Output:
Reference:- https://getbootstrap.com/docs/5.0/forms/layout/