Bootstrap

Bootastrap CSS Forms

Bootstrap 5 Forms CSS Classes

1. Basic Form Controls

Use .form-control to style inputs, selects, and textareas:

html
<input type="text" class="form-control" placeholder="Enter text" />
<select class="form-select">
<option selected>Choose option</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<textarea class="form-control" rows="3"></textarea>

2. Form Labels

Use <label> normally, or with .form-label for better styling:

html
<label for="email" class="form-label">Email address</label>
<input type="email" id="email" class="form-control" />

3. Form Layouts

Vertical Form (default)

Stacked labels and controls:

html
<form>
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control" />
</div>
</form>

Horizontal Form

Use Bootstrap grid classes for side-by-side labels and inputs:

html
<form>
<div class="row mb-3">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" />
</div>
</div>
</form>

4. Input Sizes

Add size classes .form-control-sm or .form-control-lg for small or large inputs:

html
<input type="text" class="form-control form-control-sm" placeholder="Small input" />
<input type="text" class="form-control form-control-lg" placeholder="Large input" />

5. Disabled & Readonly

Add disabled attribute and .disabled class:

html
<input type="text" class="form-control" disabled />

Readonly input:

html
<input type="text" class="form-control" readonly />

6. Validation States

Bootstrap 5 uses custom validation with .is-valid and .is-invalid:

html
<input type="text" class="form-control is-valid" />
<div class="valid-feedback">Looks good!</div>

<input type="text" class="form-control is-invalid" />
<div class="invalid-feedback">Please enter a valid value.</div>

7. Checkboxes and Radios

Use .form-check container and .form-check-input for inputs:

html
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1" />
<label class="form-check-label" for="check1">Check me out</label>
</div>

<div class="form-check">
<input class="form-check-input" type="radio" name="radioGroup" id="radio1" />
<label class="form-check-label" for="radio1">Option 1</label>
</div>

8. Switches (Toggle Buttons)

Add .form-switch to .form-check:

html
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheck" />
<label class="form-check-label" for="flexSwitchCheck">Toggle this switch</label>
</div>

9. Input Groups

Group inputs with text or buttons using .input-group:

html
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username" />
</div>

<div class="input-group mb-3">
<input type="text" class="form-control" />
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>

10. Floating Labels

Place labels inside inputs with .form-floating wrapper:

html
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" />
<label for="floatingInput">Email address</label>
</div>

11. File Input

Styled file input with .form-control:

html
<input class="form-control" type="file" />

12. Range Input

Slider with .form-range:

html
<input type="range" class="form-range" min="0" max="5" step="1" />

Summary Table

Class Use
.form-control Style inputs, selects, textareas
.form-label Style labels
.form-check Checkbox/radio container
.form-check-input Checkbox/radio input style
.form-check-label Label for checkbox/radio
.form-switch Checkbox toggle switch
.form-select Style select dropdown
.input-group Group inputs & buttons
.form-floating Floating labels
.form-control-sm Small input size
.form-control-lg Large input size
.is-valid Valid input state
.is-invalid Invalid input state

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *