Forms

Rence Material styles Bootstrap's form controls with Material Design aesthetics. All .form-control elements inherit Roboto, proper material focus rings, and consistent spacing.

Overview

Rence Material styles Bootstrap's form controls with high-fidelity Material Design aesthetics. Use .form-label, .form-control, and .form-text for proper structure.

HTML

<!-- Basic form -->
<form>
  <div class="mb-3">
    <label for="exampleEmail" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleEmail" placeholder="name@example.com">
    <div class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="examplePassword" class="form-label">Password</label>
    <input type="password" class="form-control" id="examplePassword">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="rememberMe">
    <label class="form-check-label" for="rememberMe">Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form controls

Standard input elements are refined with Material-style focus rings and state feedback. Sizing classes like .form-control-lg are fully supported.

HTML

<!-- Form controls -->
<input type="text" class="form-control mb-3" placeholder="Default input">
<input type="text" class="form-control form-control-lg mb-3" placeholder="Large input (.form-control-lg)">
<input type="text" class="form-control form-control-sm mb-3" placeholder="Small input (.form-control-sm)">
<select class="form-select mb-3">
  <option>Select an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>
<textarea class="form-control" rows="3" placeholder="Textarea"></textarea>

Grid layout

Complex forms can be built using Bootstrap's grid system inside a .row.g-3 wrapper.

HTML

<!-- Grid-based form layout -->
<form>
  <div class="row g-3">
    <div class="col-md-6">
      <label for="firstName" class="form-label">First name</label>
      <input type="text" class="form-control" id="firstName">
    </div>
    <div class="col-md-6">
      <label for="lastName" class="form-label">Last name</label>
      <input type="text" class="form-control" id="lastName">
    </div>
    <div class="col-12">
      <label for="address" class="form-label">Address</label>
      <input type="text" class="form-control" id="address" placeholder="1234 Main St">
    </div>
    <div class="col-md-6">
      <label for="city" class="form-label">City</label>
      <input type="text" class="form-control" id="city">
    </div>
    <div class="col-md-4">
      <label for="state" class="form-label">State</label>
      <select class="form-select" id="state">
        <option>Choose...</option>
      </select>
    </div>
    <div class="col-md-2">
      <label for="zip" class="form-label">Zip</label>
      <input type="text" class="form-control" id="zip">
    </div>
    <div class="col-12">
      <button type="submit" class="btn btn-primary">Submit form</button>
    </div>
  </div>
</form>