Bootstrap Forms

Bootstrap styles all form controls: text inputs, email, password, textarea, and submit buttons. Wrap fields in .mb-3 for spacing. Use .form-label on <label> and .form-control on inputs.

Forms

Bootstrap styles all form controls: text inputs, email, password, textarea, and submit buttons. Wrap fields in .mb-3 for spacing. Use .form-label on <label> and .form-control on inputs.

Add .form-text for help text below a field. Disabled and readonly states use the disabled and readonly attributes with matching Bootstrap styling.

Real-life example: A Bootstrap form is like a printed admission form with clear boxes and labels — every field lines up and looks professional without custom CSS.

Basic form layout

<form class="container" style="max-width: 400px;">
  <div class="mb-3">
    <label for="name" class="form-label">Full name</label>
    <input type="text" class="form-control" id="name" placeholder="Ali Khan" />
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" required />
    <div class="form-text">We never share your email.</div>
  </div>
  <div class="mb-3">
    <label for="msg" class="form-label">Message</label>
    <textarea class="form-control" id="msg" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Send</button>
</form>

Form sizing and layout

Use .form-control-lg and .form-control-sm for input sizes. .row and .col-* inside forms create horizontal layouts on wider screens.

Real-life example: Large inputs are like wide answer boxes for important questions; small inputs fit tight filter bars on a dashboard.

Large input and inline row

<input class="form-control form-control-lg mb-3" type="text" placeholder="Large input" />

<div class="row g-2">
  <div class="col-md-6">
    <input type="text" class="form-control" placeholder="First name" />
  </div>
  <div class="col-md-6">
    <input type="text" class="form-control" placeholder="Last name" />
  </div>
</div>