Forms
Bootstrap provides ready-to-use form styles, including input fields, checkboxes, radio buttons, and more. Easily create user-friendly forms with minimal effort.
Element | Description | Syntax |
---|---|---|
Form control | Default class for styling elements. | .form-control |
Select | Shows a collapsible list of values that can be selected. | .form-select |
Checks and radio | Used for radio-buttons and checkboxes | .form-check |
Range | Defines the range | .form-control-range |
Layout | Two major layout options. Fluid and fixed layout |
|
Validation | Used to apply validation. | :valid|invalid |
Datalist | Style the data list using form-control classes. |
|
Input group | Added as a wrapper around each input type or form control. | .input-group |
Example Code:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<h1 class="text-success text-center">
w3wiki
</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>
Bootstrap Cheat Sheet – A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.
Contact Us