Tutorial

Forum

Sign Up

log In

Bootstrap
Bootstrap 5 Input

❮ Previous

Next ❯

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.