Skip to main content

Forms

Examples of form control styles.

<form>
  <div class="row g-2">
    <div class="col-auto">
      <label for="name" class="visually-hidden">First name</label>
      <input type="text" class="form-control border-0 fst-italic" id="name" placeholder="First name">
    </div>
    <div class="col-auto">
      <label for="email" class="visually-hidden">Email</label>
      <input type="email" class="form-control border-0 fst-italic" id="email" placeholder="Email address">
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary">Sign Up</button>
    </div>
  </div>
</form>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

<input class="form-control form-control-lg border-0" type="text" placeholder=".form-control-lg">
<input class="form-control border-0" type="text" placeholder="Default input">
<input class="form-control form-control-sm border-0" type="text" placeholder=".form-control-sm">

Bootstrap Documentation