Advertisement
Google Ad Slot: content-top
Bootstrap 5 Input
In Bootstrap 5, input fields are styled using the form-control class, which makes them responsive and visually appealing with minimal effort. Bootstrap provides various options to customize and enhance input fields.
Basic Input:
To style a basic input field, add the form-control class:
Example
<div class="mb-3">
<label for="exampleInput" class="form-label">Example Input</label>
<input type="text" class="form-control" id="exampleInput" placeholder="Enter text">
</div>
Input Types:
Bootstrap supports all standard HTML input types:
Example
<div class="mb-3">
<label for="emailInput" class="form-label">Email</label>
<input type="email" class="form-control" id="emailInput" placeholder="Enter email">
</div>
<div class="mb-3">
<label for="passwordInput" class="form-label">Password</label>
<input type="password" class="form-control" id="passwordInput" placeholder="Enter password">
</div>
<div class="mb-3">
<label for="numberInput" class="form-label">Number</label>
<input type="number" class="form-control" id="numberInput" placeholder="Enter number">
</div>
<div class="mb-3">
<label for="dateInput" class="form-label">Date</label>
<input type="date" class="form-control" id="dateInput">
</div>
Input Sizes:
Adjust input sizes using the form-control-{size} classes:
Class |
Description |
|---|---|
form-control-lg |
Large input field. |
form-control |
Default input field size. |
form-control-sm |
Small input field. |
Example
<div class="mb-3">
<input type="text" class="form-control form-control-lg" placeholder="Large input">
</div>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Default input">
</div>
<div class="mb-3">
<input type="text" class="form-control form-control-sm" placeholder="Small input">
</div>
Disabled and Readonly Inputs:
Disabled:
Readonly:
Example
<b>Disabled:</b>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Disabled input" disabled>
</div>
<b>Readonly:</b>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Readonly input" readonly value="Readonly">
</div>
Validation States:
Bootstrap provides classes for styling validation states:
Class |
Description |
|---|---|
is-valid |
Green border for valid input. |
is-invalid |
Red border for invalid input. |
Looks good!
Please provide a valid value.
Example
<div class="mb-3">
<input type="text" class="form-control is-valid" placeholder="Valid input">
<div class="valid-feedback">Looks good!</div>
</div>
<div class="mb-3">
<input type="text" class="form-control is-invalid" placeholder="Invalid input">
<div class="invalid-feedback">Please provide a valid value.</div>
</div>
Other Inputs:
Example
<div class="mb-3">
<label class="mb-1"><b class="mb-2">Checkbox input:</b></label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkboxExample" checked>
<label class="form-check-label" for="checkboxExample">Check me out</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="checkboxExample2" checked>
<label class="form-check-label" for="checkboxExample2">Switch me out</label>
</div>
</div>
<div class="mb-3">
<label class="mb-1"><b class="mb-2">Radio input:</b></label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radioExample1" checked>
<label class="form-check-label" for="radioExample1">Select this option 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radioExample2">
<label class="form-check-label" for="radioExample2">Select this option 2</label>
</div>
</div>
<div class="mb-3">
<label class="mb-1"><b class="mb-2">Range input:</b></label>
<div class="">
<input type="range" class="form-range" id="customRange" name="points" step="2" min="0" max="20" value="0">
</div>
</div>