Bootstrap includes a huge collection of classes to customize HTML forms and provides consistency on rendering elements across all browsers and devices.
Here's an example of a bootstrap form.
Here's the HTML source code.
<form>
<div class="form-group">
<label>Username</label>
<input type="text" name="" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="" class="form-control">
</div>
<div class="form-group form-check">
<input type="checkbox" name="" id="checkbox" class="form-check-input">
<label for="checkbox" class="form-check-label">Remember me</label>
</div>
<div class="form-group">
<input type="submit" name="" class="btn btn-success" value="Log In">
</div>
</form>
Class form-group provides a structure to the form. It is used to group forms, labels, help texts as well as validation messages. It also applies some spacing at the bottom.
If you needed to create custom layout for the form, you can use the flex grid options easily by using row or even form-row as a parent container.
Class form-control is used to style textual forms like <input>, &lr;select> and <textarea>. For input type file, class form-control-file is included instead of form-control. For input type range, use class form-control-range.
For sizing, classes form-control-sm or form-control-lg can be used.
Class form-control-plaintext can be used for readonly form fields which will remove the default form stylings but preserve the spacings.
Horizontal forms can be added to web page using the flex grid options. Class col-form-label-sm or col-form-label-lg can be used for sizings.
Here's the HTML source code.
<form>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Username</label>
<div class="col-sm-10">
<input type="text" name="" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" name="" class="form-control">
</div>
</div>
</form>
Inline form can be added to a web page adding class form-inline to the <form> element.
Here's the HTML source code.
<form class="form-inline">
<div class="form-group mb-2 mr-2">
<input type="text" class="form-control" placeholder="Your Email">
</div>
<div class="form-group mb-2 mr-2">
<input type="password" class="form-control" placeholder="Your Password">
</div>
<input type="submit" class="btn btn-primary mb-2" value="Submit">
</form>
Class form-check is included for checkbox and radio containers which will force each checkbox or radio items appear in a new line by default. Use class form-check-inline to align them horizontally.
Bootstrap 4 also includes custom styling classes for select, checkbox and radio elements.
<select class="custom-select mb-2"> <option>Choose...</option> <option>One</option> <option>Two</option> <option>Three</option> </select>
<div class="custom-control custom-checkbox mb-2"> <input type="checkbox" class="custom-control-input" id="customControl"> <label class="custom-control-label" for="customControl">Remember my preference</label> </div>
<div class="custom-control custom-radio mb-2"> <input type="radio" name="gender" class="custom-control-input" id="custoRadio"> <label class="custom-control-label" for="custoRadio"> Male</label> </div> <div class="custom-control custom-radio mb-2"> <input type="radio" name="gender" class="custom-control-input" id="custoRadio1"> <label class="custom-control-label" for="custoRadio1"> Female</label> </div>
A switch can be used in place of checkbox as shown below. Simply replace class custom-checkbox with custom-switch.
<div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="customSwitch1"> <label class="custom-control-label" for="customSwitch1">Switch</label> </div>
Bootstrap 4 includes class custom-file-input to customize a file input form field.
<div class="custom-file"> <input type="file" class="custom-file-input" id="customFile"> <label class="custom-file-label" for="customFile">Choose file</label> </div>
Bootstrap 4 also includes custom-range class for new styling of range.
<input type="range" class="custom-range" id="customRange1">
Help texts can be added to a form using class form-text.
<div class="form-group"> <input type="password" name="" class="form-control"> <small class="form-text text-muted">Passwords must be at least 8 characters long.</small> </div>
You can use the default bootstrap classes and scripts to validate form with great ease.
<form method="post" class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label>Username</label>
<input type="text" class="form-control" placeholder="Username" value="webtrickshome" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password" required>
<div class="invalid-feedback">
Please provide a valid password.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check pl-0">
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="terms" required>
<label class="custom-control-label" for="terms">Agree to terms and conditions</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
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>
If you are using a server side validation, make sure that you have added class is-valid or is-invalid to all form fields and then added the valid or invalid feedback containers as required. You can also use valid-tooltip or invalid-tooltip for feedbacks as well.
You can easily add texts or buttons on either side of the form element using class input-group. Use class input-group-prepend to add it on the left side of the form element or use class input-group-append to add it on the right.
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-warning">Go</button>
</div>
</div>
Use class input-group-sm or input-group-lg for relatively smaller or larger input group.
Adding styles to buttons has become easy with bootstrap. Simply add class btn to any link or button or input type submit or reset to add basic button styles like padding, font-size, line height, transition, etc. Add contextual class for background or border to add contextual background or border color.
<button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-light">Light</button> <button class="btn btn-dark">Dark</button> <button class="btn btn-info">Info</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-link">Link</button>
You can also style a button by adding contextual border classes instead.
<a href="#" class="btn btn-outline-primary">Primary</a> <a href="#" class="btn btn-outline-secondary">Secondary</a> <a href="#" class="btn btn-outline-success">Success</a> <a href="#" class="btn btn-outline-danger">Danger</a> <a href="#" class="btn btn-outline-warning">Warning</a> <a href="#" class="btn btn-outline-info">Info</a> <a href="#" class="btn btn-outline-light">Light</a> <a href="#" class="btn btn-outline-dark">Dark</a>
Add class btn-sm or btn-lg for larger or smaller buttons.
<input type="submit" value="Small" class="btn btn-sm btn-primary"> <input type="reset" value="Large" class="btn btn-lg btn-primary">
Add class btn-block to create a full width block level button.
<button class="btn btn-block btn-primary">Primary</button>
Add class active or disabled to create an active or a disabled button.
<a href="#" class="btn btn-primary active">Active</a> <a href="#" class="btn btn-primary disabled">Disabled</a>
Add class btn-group to the parent container of the buttons to group them and display them as a single unit. Button groups size can be customized with classes btn-group-sm and btn-group-lg.
<div class="btn-group"> <button class="btn btn-danger">Button</button> <button class="btn btn-danger">Button</button> <button class="btn btn-danger">Button</button> </div>
Input elements like checkbox and radio can be styled as buttons.
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Checkbox
</label>
<label class="btn btn-primary">
<input type="checkbox"> Checkbox
</label>
<label class="btn btn-primary">
<input type="checkbox"> Checkbox
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" name="options" checked> Radio
</label>
<label class="btn btn-success">
<input type="radio" name="options"> Radio
</label>
<label class="btn btn-success">
<input type="radio" name="options"> Radio
</label>
</div>
0 Comment
Leave a comment