Form Layout: Bootstrap provides two types of form layout which are listed below:
- Stacked form
- Inline form
Stacked form: The stacked form creates input field and submit button in stacked format.
Example:
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Bootstrap Form</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h1 class = "text-success text-center" >
GeeksforGeeks
</ h1 >
< h2 class = "text-center" >Stacked form</ h2 >
< div class = "container" >
< form action = "#" >
< div class = "form-group" >
< label for = "fname" >First Name:</ label >
< input type = "text" class = "form-control" id = "fname"
placeholder = "Enter First Name" name = "fname" >
</ div >
< div class = "form-group" >
< label for = "lname" >Last Name:</ label >
< input type = "text" class = "form-control" id = "lname"
placeholder = "Enter Last Name" name = "lname" >
</ div >
< div class = "form-group" >
< label for = "email" >Email Id:</ label >
< input type = "email" class = "form-control" id = "email"
placeholder = "Enter Email Id" name = "email" >
</ div >
< div class = "form-group" >
< label for = "contact" >Contact No:</ label >
< input type = "text" class = "form-control" id = "contact"
placeholder = "Enter Contact Number" name = "contact" >
</ div >
< div class = "form-group form-check" >
< label class = "form-check-label" >
< input class = "form-check-input" type = "checkbox"
name = "remember" >
Remember me
</ label >
</ div >
< button type = "submit" class = "btn bg-success" >
Submit
</ button >
</ form >
</ div >
</ body >
</ html >
|
Output:
Inline Form: The .form-inline class is used with <form> element to create inline form. The inline form contains elements that are left-aligned and inline. The inline property applies when viewports are at least 576px wide. If screen size is smaller than 576px then the form element will be stacked vertically.
Example:
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Bootstrap Form</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h1 class = "text-success text-center" >
GeeksforGeeks
</ h1 >
< h2 class = "text-center" >Inline form</ h2 >
< div class = "container" >
< form class = "form-inline" action = "#" >
< label for = "fname" >First Name:</ label >
< input type = "text" class = "form-control"
id = "fname" placeholder = "Enter First Name"
name = "fname" >
< label for = "lname" >Last Name:</ label >
< input type = "text" class = "form-control"
id = "lname" placeholder = "Enter Last Name"
name = "lname" >
< label for = "email" >Email Id:</ label >
< input type = "email" class = "form-control"
id = "email" placeholder = "Enter Email Id"
name = "email" >
< label for = "contact" >Contact No:</ label >
< input type = "text" class = "form-control"
id = "contact"
placeholder = "Enter Contact Number"
name = "contact" >
< div class = "form-group form-check" >
< label class = "form-check-label" >
< input class = "form-check-input"
type = "checkbox"
name = "remember" >
Remember me
</ label >
</ div >
< button type = "submit"
class = "btn bg-success" >
Submit
</ button >
</ form >
</ div >
</ body >
</ html >
|
Output:
Inline Form with Utilities: The Bootstrap spacing utilities is used to add space to look better inline form. The .mr-sm-2 class is used to add the right margin to each input on all devices (small and up) and .mb-2 class adds a margin to the bottom.
Example:
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Bootstrap Form</ title >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h1 class = "text-success text-center" >
GeeksforGeeks
</ h1 >
< h2 class = "text-center" >Inline form with Utilities</ h2 >
< div class = "container-fluid" >
< form class = "form-inline" action = "#" >
< label for = "fname" class = "mb-2 mr-sm-2" >
First Name:
</ label >
< input type = "text" class = "form-control mb-2 mr-sm-2"
id = "fname" placeholder = "Enter First Name"
name = "fname" >
< label for = "lname" class = "mb-2 mr-sm-2" >
Last Name:
</ label >
< input type = "text" class = "form-control mb-2 mr-sm-2"
id = "lname" placeholder = "Enter Last Name"
name = "lname" >
< label for = "email" class = "mb-2 mr-sm-2" >
Email Id:
</ label >
< input type = "email" class = "form-control mb-2 mr-sm-2"
id = "email" placeholder = "Enter Email Id"
name = "email" >
< label for = "contact" class = "mb-2 mr-sm-2" >
Contact No:
</ label >
< input type = "text" class = "form-control mb-2 mr-sm-2"
id = "contact" placeholder = "Enter Contact Number"
name = "contact" >
< div class = "form-check mb-2 mr-sm-2" >
< label class = "form-check-label" >
< input class = "form-check-input"
type = "checkbox"
name = "remember" >
Remember me
</ label >
</ div >
< button type = "submit" class = "btn bg-success mb-2" >
Submit
</ button >
</ form >
</ div >
</ body >
</ html >
|
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Bootstrap Form</ title >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h1 class = "text-success text-center" >
GeeksforGeeks
</ h1 >
< h2 class = "text-center" >Inline form with Utilities</ h2 >
< div class = "container-fluid" >
< form class = "form-inline" action = "#" >
< label for = "fname" class = "mb-2 mr-sm-2" >
First Name:
</ label >
< input type = "text" class = "form-control mb-2 mr-sm-2"
id = "fname" placeholder = "Enter First Name"
name = "fname" >
< label for = "lname" class = "mb-2 mr-sm-2" >
Last Name:
</ label >
< input type = "text" class = "form-control mb-2 mr-sm-2"
id = "lname" placeholder = "Enter Last Name"
name = "lname" >
< label for = "email" class = "mb-2 mr-sm-2" >
Email Id:
</ label >
< input type = "email" class = "form-control mb-2 mr-sm-2"
id = "email" placeholder = "Enter Email Id"
name = "email" >
< label for = "contact" class = "mb-2 mr-sm-2" >
Contact No:
</ label >
< input type = "text" class = "form-control mb-2 mr-sm-2"
id = "contact" placeholder = "Enter Contact Number"
name = "contact" >
< div class = "form-check mb-2 mr-sm-2" >
< label class = "form-check-label" >
< input class = "form-check-input"
type = "checkbox"
name = "remember" >
Remember me
</ label >
</ div >
< button type = "submit" class = "btn bg-success mb-2" >
Submit
</ button >
</ form >
</ div >
</ body >
</ html >
|
Output:
Form Validation: The .was-validated or .needs-validation class in <form> element is used to provide validation before or after submitting the form. The input field with green border indicate valid and red border indicate invalid form content. The .valid-feedback or .invalid-feedback is used to display a notification message to the user before submitting the form.
Example:
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Bootstrap Form</ title >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h1 class = "text-success text-center" >GeeksforGeeks</ h1 >
< h2 class = "text-center" >Form Validation</ h2 >
< div class = "container" >
< form action = "#" class = "was-validated" >
< div class = "form-group" >
< label for = "fname" >First Name:</ label >
< input type = "text" class = "form-control" id = "fname"
placeholder = "Enter First Name" name = "fname" required>
< div class = "valid-feedback" >Valid</ div >
< div class = "invalid-feedback" >
Please fill this field
</ div >
</ div >
< div class = "form-group" >
< label for = "lname" >Last Name:</ label >
< input type = "text" class = "form-control" id = "lname"
placeholder = "Enter Last Name" name = "lname" required>
< div class = "valid-feedback" >Valid</ div >
< div class = "invalid-feedback" >
Please fill this field
</ div >
</ div >
< div class = "form-group" >
< label for = "email" >Email Id:</ label >
< input type = "email" class = "form-control" id = "email"
placeholder = "Enter Email Id" name = "email" required>
< div class = "valid-feedback" >Valid</ div >
< div class = "invalid-feedback" >
Please fill this field
</ div >
</ div >
< div class = "form-group" >
< label for = "contact" >Contact No:</ label >
< input type = "text" class = "form-control" id = "contact"
placeholder = "Enter Contact Number" name = "contact"
required>
< div class = "valid-feedback" >Valid</ div >
< div class = "invalid-feedback" >
Please fill this field
</ div >
</ div >
< div class = "form-group form-check" >
< label class = "form-check-label" >
< input class = "form-check-input" type = "checkbox"
name = "remember" required> I agree
< div class = "valid-feedback" >Valid</ div >
< div class = "invalid-feedback" >
Please check the checkbox
</ div >
</ label >
</ div >
< button type = "submit" class = "btn bg-success" >
Submit
</ button >
</ form >
</ div >
</ body >
</ html >
|
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari