Forms

Showcase of various form control styles.

<form>
  <div class="mb-4">
    <label for="email" class="form-label text-uppercase">Email</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
  </div>
  <div class="mb-4">
    <label for="password" class="form-label text-uppercase">Password</label>
    <input type="password" class="form-control" id="password">
  </div>
  <button type="submit" class="btn btn-primary rounded-pill">Submit</button>
</form>

Sizing

Adjust heights with classes like .form-control-lg and .form-control-sm.

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

Floating labels

Create simple form labels that float over your input fields.

<form>
  <div class="form-floating mb-4">
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
    <label for="email" class="form-label text-uppercase">Email</label>
  </div>
  <div class="form-floating mb-4">
    <input type="password" class="form-control" id="password" placeholder="Password">
    <label for="password" class="form-label text-uppercase">Password</label>
  </div>
  <button type="submit" class="btn btn-primary rounded-pill">Submit</button>
</form>