Bootstrap Forms
Bootstrap provides a set of CSS classes and JavaScript plugins to style and enhance HTML forms. Here is an example of how to create a simple Bootstrap form:
Bootstrap Forms
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
In this example, we have used the following Bootstrap classes to create the form:
- form-group: This is a container for a form element, such as a label and input.
- form-control: This is a class applied to input elements to style them.
- form-check: This is a container for a form checkbox or radio button.
- form-check-input: This is a class applied to checkboxes and radio buttons.
- form-check-label: This is a class applied to the label associated with a checkbox or radio button.
- btn: This is a class applied to buttons.
- btn-primary: This is a class that sets the button color to blue.
In addition, we have used the label element with the for attribute to associate the label with the input, which is useful for screen readers and other assistive technologies. We have also used the small element with the form-text class to add a small text below the email input.
You can further customize the form with additional Bootstrap classes, such as form-inline to create inline forms, or using form-horizontal to create horizontal forms. Bootstrap also provides validation styles and JavaScript plugins to help you validate and submit forms.