Bootstrap 5 Layout Forms
Last Updated :
26 Dec, 2022
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 =
rel = "stylesheet" >
</ head >
< body class = "m-3" >
< h1 class = "text-success" >
Geeksforgeeks
</ 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:
Bootstrap 5 Layout Forms
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 =
rel = "stylesheet" >
</ head >
< body class = "m-3" >
< h1 class = "text-success" >
Geeksforgeeks
</ 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:
Bootstrap 5 Layout Forms
Reference:- https://getbootstrap.com/docs/5.0/forms/layout/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...