BS4 Forms
Bootstrap 4's Default Settings
With Bootstrap, form controls immediately get some global styling:
The width of every text-based <input>, <textarea>, and <select> element with class .form-control is 100%.
Bootstrap 4 Form Layouts
- Stacked (full-width) form
- Inline form
Bootstrap 4 Stacked Form
A stacked form with two input fields, a checkbox, and a submit button is created using the example that follows.
To guarantee appropriate margins, surround each form control with a wrapper element that ends in .form-group:
Example
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Bootstrap Inline Form
- To the <form> element, add class .form-inline.
Example
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Inline Form with Utilities
With the spacing tools provided by Bootstrap, the above inline form will appear much nicer and feel less “compressed”. The ensuing illustration augments every input on all devices (small and up) with a right margin (.mr-sm-2). Additionally, the input field is styled using a margin bottom class (.mb-2) when it breaks (converts from horizontal to vertical owing to insufficient space or width):
Example
<form class="form-inline" action="/action_page.php">
<label for="email" class="mr-sm-2">Email address:</label>
<input type="email" class="form-control mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd" class="mr-sm-2">Password:</label>
<input type="password" class="form-control mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
Form Row/Grid
Instead of utilizing spacing tools, you may instead manage the width and alignment of form inputs by using columns (.col). Don’t forget to include them in a.row container, though.
We’ll utilize two columns that will show up side by side in the example below. In the Bootstrap Grids Chapter, there will be a lot more information on rows and columns.
==== Example MUKAVU ====
Example
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Use .form-row instead of .row if you wish to reduce grid margins (override default column gutters):
==== Example MUKAVU ====
Example
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Form Validation
==== Example MUKAVU ====
You may give users insightful feedback by using various validation classes. If you would like to offer validation feedback either before or after the form is submitted, add .was-validated or .needs-validation to the <form> element. To show what’s missing from the form, the input fields will have a border that is either red (invalid) or green (valid). A .valid-feedback or .invalid-feedback message can also be added to inform the user of any missing information or actions that must be completed before submitting the form.
Example
In this instance, the .was-validated suffix is used to identify any missing fields prior to form submission:
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out 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 on blabla.
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Example
In this case, the validation effect is added after the form has been submitted (if there is anything lacking), thanks to the use of .needs-validation. Note that in order for this example to function properly, you will also need to include some jQuery code:
<form action="/action_page.php" class="needs-validation" novalidate>
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out 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 on blabla.
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
