Academy HTML CSS JavaScript TypeScript SQL MongoDB Python NumPy Pandas PHP Java C C++ C# Bootstrap Tailwind CSS jQuery React Vue.js Node.js Git
❮ ❯

Bootstrap Forms

Styled inputs, selects, checks and validation.

✍️ 3 exercises + code challenge in this lesson
❮ Previous Next ❯
  • .form-label and .form-control for text inputs.
  • .form-select for drop-downs.
  • .form-check, .form-check-input, .form-switch for checkboxes and switches.
  • .input-group adds text or buttons beside an input.
  • .form-floating: labels that float above the input.
  • Validation styles: .is-valid, .is-invalid with .invalid-feedback.

Key Takeaways: Bootstrap Forms

Mastering Bootstrap Forms helps you write clean and reliable Bootstrap code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

Bootstrap Forms Code Example

Bootstrap 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container py-3" style="max-width: 480px;">
  <form>
    <div class="mb-3">
      <label class="form-label" for="email">Email</label>
      <input type="email" class="form-control" id="email" placeholder="you@example.com">
    </div>
    <div class="form-floating mb-3">
      <input type="password" class="form-control is-invalid" id="pw" placeholder="Password">
      <label for="pw">Password</label>
      <div class="invalid-feedback">Password must be 8+ characters.</div>
    </div>
    <div class="input-group mb-3">
      <span class="input-group-text">Rs</span>
      <input type="number" class="form-control" value="5000">
    </div>
    <select class="form-select mb-3"><option>Beginner</option><option>Advanced</option></select>
    <div class="form-check form-switch mb-3">
      <input class="form-check-input" type="checkbox" id="news" checked>
      <label class="form-check-label" for="news">Email me updates</label>
    </div>
    <button class="btn btn-primary w-100">Create account</button>
  </form>
</div>
Free sign-in required · Google login available

Bootstrap Forms Practice Exercises

Check what you learned in “Bootstrap Forms”.

/ 3 solved
Fill in the blank

Style a text input.

<input type="text" class="">
✓ Correct! Not quite. Try again.
Multiple choice

Which class styles a drop-down <select>?

✓ Correct! Not quite. Try again.
Code challenge

Add an email input with the class "form-control" and a label with class "form-label".

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
❮ Previous
Bootstrap Navbar
Next ❯
Bootstrap Modals

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services