This chapter will discuss about Bootstrap form layout. Add structure to your forms with form layout options, from inline to horizontal to implementing custom grids.
Form layout
- Bootstrap gives no default styling for the <form> element, but there are a few capable browser highlights that are given by default. Each group of form fields must be inside a <form> element.
- Ensure to be specify and include a type attribute for <button>s within a <form> as they default to type=”submit”.
- Forms are stacked vertically by default. Bootstrap uses display: block and width: 100% to nearly all form controls. To change layout of each form, use additional classes.
Utilities
- To add some structure to forms should be use margin utilities. Use basic grouping of labels, controls, optional form text, and form validation messages.
- For consistency, sticking to margin-bottom utilities and employing a single direction all through the form is recommended.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Layout </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="mb-3"><label for="formGroupExampleInput" class="form-label">Username</label><input type="text" class="form-control" id="formGroupExampleInput" placeholder="Username"></div><div class="mb-3"><label for="formGroupExampleInput2" class="form-label">Password</label><input type="text" class="form-control" id="formGroupExampleInput2" placeholder="password"></div></body></html>
Form grid
Use grid classes for building the more complex forms. Form a grid for form layouts that require multiple columns, varied widths, and additional alignment options. You need to enable Sass variable using $enable-grid-classes.https://www.tutorialspoint.com/bootstrap/examples/layout_form_grid.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Layout</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row mt-2"><div class="col"><input type="text" class="form-control" placeholder="Username" aria-label="Username"></div><div class="col"><input type="text" class="form-control" placeholder="Password" aria-label="Password"></div></div></body></html>
Gutters
To control over the gutter width in the inline as block direction use the gutter modifier classes. By using $enable-grid-classes you can enable Sass variable.https://www.tutorialspoint.com/bootstrap/examples/layout_gutters.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Layout</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row g-3 mt-2"><div class="col"><input type="text" class="form-control" placeholder="Username" aria-label="Username"></div><div class="col"><input type="text" class="form-control" placeholder="Password" aria-label="Password"></div></div></body></html>
Create more complex layouts using the grid system.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Layout</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><form class="row g-3"><div class="col-md-6"><label for="inputFirst" class="form-label">First name</label><input type="text" class="form-control" id="inputFirst"></div><div class="col-md-6"><label for="inputLast" class="form-label">Last name</label><input type="text" class="form-control" id="inputLast"></div><div class="col-md-6"><label for="inputEmail" class="form-label">Email</label><input type="email" class="form-control" id="inputEmail"></div><div class="col-6"><label for="inputPassword" class="form-label">Password</label><input type="Password" class="form-control" id="inputPassword" placeholder="password"></div><div class="col-12"><label for="inputAddress" class="form-label">Address</label><input type="text" class="form-control" id="inputAddress" placeholder="Address"></div><div class="col-md-6"><label for="inputAdharno" class="form-label">Adharcard no</label><input type="text" class="form-control" id="inputAdharno"></div><div class="col-md-6"><label for="inputMobno" class="form-label">Mobile no</label><input type="text" class="form-control" id="inputMobno"></div><div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" id="gridCheck"><label class="form-check-label" for="gridCheck">I agree to terms and conditions </label></div></div><div class="col-12"><button type="submit" class="btn btn-primary">Submit</button></div></form></body></html></pre>Horizontal form
- Use the class .row to form groups to create horizontal forms with the grid. Use the class .col-*-* to define the width of the labels and controls.
- To make a form vertically centered with their associated form controls, use the class .col-form-label to <label>.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Layout</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><form><div class="row mb-3"><label for="inputEmail3" class="col-sm-2 col-form-label">Email</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3"></div></div><div class="row mb-3"><label for="inputPassword3" class="col-sm-2 col-form-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3"></div></div><fieldset class="row mb-3"><legend class="col-form-label col-sm-2 pt-0">Language Known</legend><div class="col-sm-10"><div class="form-check"><input class="form-check-input" type="checkbox" name="gridCheck" id="gridCheck1" value="option1" checked><label class="form-check-label" for="gridCheck1">English </label></div><div class="form-check"><input class="form-check-input" type="checkbox" name="gridCheck" id="gridCheck2" value="option2"><label class="form-check-label" for="gridCheck2"> Hindi </label></div><div class="form-check"><input class="form-check-input" type="checkbox" name="gridCheck" id="gridCheck2" value="option2"><label class="form-check-label" for="gridCheck2"> marathi </label></div><div class="form-check disabled"><input class="form-check-input"type="checkbox" name="gridCheck" id="gridCheck3" value="option3" disabled><label class="form-check-label" for="gridCheck3"> Others </label></div></div></fieldset><div class="row mb-3"><div class="col-sm-10 offset-sm-2"><div class="form-check"><input class="form-check-input" type="radio" id="gridRadio1"><label class="form-check-label" for="gridRadio1"> Radio Button </label></div></div></div><button type="submit" class="btn btn-primary">Submit</button></form></body></html></pre>Horizontal form label sizing
Use the classes .col-form-label-sm or .col-form-label-lg to your <label> or <legend> to follow the size of .form-control-sm and .form-control-lg respectively.https://www.tutorialspoint.com/bootstrap/examples/layout_horizontal_form_label_sizing.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Layout</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row mb-3"><label for="colFormSm" class="col-sm-2 col-form-label col-form-label-sm">Username</label><div class="col-sm-10"><input type="email" class="form-control form-control-sm" id="colFormSm" placeholder="Username"></div></div><div class="row mb-3"><label for="colFormLabel" class="col-sm-2 col-form-label">Password</label><div class="col-sm-10"><input type="text" class="form-control" id="colFormLabel" placeholder="Password"></div></div><div class="row"><label for="colFormLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label><div class="col-sm-10"><input type="email" class="form-control form-control-lg" id="colFormLg" placeholder="email"></div></div></body></html>Column sizing
As mentioned in the previous example, the grid system allows any number of .cols within a .row. Divide the available width evenly between them. You can also use a specific column class like .col-sm-7 to select a subset of columns to occupy more or less space while the remaining .col divides the rest evenly.https://www.tutorialspoint.com/bootstrap/examples/layout_column_sizing.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Layout</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row g-3"><div class="col-sm-6"><input type="text" class="form-control" placeholder="Email" aria-label="Email"></div><div class="col-sm-3"><input type="text" class="form-control" placeholder="Mobile no" aria-label="Mobile no"></div><div class="col-sm-2"><input type="text" class="form-control" placeholder="Age" aria-label="Age"></div></div></body></html>Auto-sizing
In the below example, use flexbox utility to center the content vertically and change .col to .col-auto. So that the column only takes up as much space as it needs. In other words, the column size depends on the content.https://www.tutorialspoint.com/bootstrap/examples/layout_auto_sizing.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Layout</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><form class="row gy-2 gx-3 align-items-center"><div class="col-auto"><label class="visually-hidden" for="inputName">Name</label><input type="text" class="form-control" id="inputName" placeholder="Name"></div><div class="col-auto"><label class="visually-hidden" for="inputGroup"></label><div class="input-group"><input type="text" class="form-control" id="inputGroup" placeholder="Username"><div class="input-group-text">@gmail.com</div></div></div><div class="col-auto"><label class="visually-hidden" for="selectLanguage">Language</label><select class="form-select" id="selectLanguage"><option selected>Choose...</option><option value="1">English</option><option value="2">Hindi</option><option value="3">Marathi</option></select></div><div class="col-auto"><div class="form-check"><input class="form-check-input" type="checkbox" id="autoSizingCheck"><label class="form-check-label" for="autoSizingCheck">Remember me </label></div></div><div class="col-auto"><button type="submit" class="btn btn-primary">Submit</button></div></form></body></html></pre>Then you can remix again with size-specific column classes.https://www.tutorialspoint.com/bootstrap/examples/layout_autosizing_size_specific.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Layout</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><form class="row gx-3 gy-2 align-items-center mt-2"><div class="col-sm-3"><label class="visually-hidden" for="inputName">Name</label><input type="text" class="form-control" id="inputName" placeholder="Name"></div><div class="col-sm-3"><label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label><div class="input-group"><input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Email"><div class="input-group-text">@gmail.com</div></div></div><div class="col-sm-3"><label class="visually-hidden" for="selectLanguage">Language</label><select class="form-select" id="selectLanguage"><option selected>Choose...</option><option value="1">English</option><option value="2">Hindi</option><option value="3">Marathi</option></select></div><div class="col-auto"><div class="form-check"><input class="form-check-input" type="checkbox" id="autoSizingCheck2"><label class="form-check-label" for="autoSizingCheck2">Remember me </label></div></div><div class="col-auto"><button type="submit" class="btn btn-primary">Submit</button></div></form></body></html></pre>Inline forms
- To build responsive horizontal layouts use the classes .row-cols-*.
- Use gutter modifier classes to have gutters in horizontal and vertical directions.
- In narrow mobile viewports, .col-12 is useful for stacking form controls, etc.
- To align the form elements at the middle and make the .form-check align properly use the class .align-items-center.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Layout</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><form class="row row-cols-lg-auto g-3 align-items-center"><div class="col-12"><label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label><div class="input-group"><input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username"><div class="input-group-text">@gmail.com</div></div></div><div class="col-12"><label class="visually-hidden" for="selectLanguage">Language</label><select class="form-select" id="selectLanguage"><option selected>Choose...</option><option value="1">English</option><option value="2">Hindi</option><option value="3">Marathi</option></select></div><div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" id="inlineFormCheck"><label class="form-check-label" for="inlineFormCheck">Remember me </label></div></div><div class="col-12"><button type="submit" class="btn btn-primary">Submit</button></div></form></body></html></pre>Print Page
Leave a Reply