Forms

Basic Form


<form>
  <label>Name</label>
  <input type="text" placeholder="Your name">
  <label>Email address</label>
  <input type="email" placeholder="Enter your email" required>
  <label>Message</label>
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit" class="button button-md button-dark">Submit</button>
</form>

Form Style 2


<form class="form-style-2">
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Enter your email" required>
  <textarea name="message" placeholder="Message" required></textarea>
</form>

Form Style 3


<form class="form-style-3">
  <input type="text" placeholder="Your name">
  <input type="email" placeholder="Enter your email" required>
  <textarea name="message" placeholder="Message" required></textarea>
</form>

Form Style 4


<form class="form-style-4">
  <input type="text" placeholder="Your name">
  <input type="email" placeholder="Enter your email" required>
  <textarea name="message" placeholder="Message" required></textarea>
</form>

Form Style 5


<form class="form-style-5">
  <input type="text" placeholder="Your name">
  <input type="email" placeholder="Enter your email" required>
  <textarea name="message" placeholder="Message" required></textarea>
</form>

Form - Row


<form>
  <div class="row g-4">
    <div class="col">
      <input type="text" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" placeholder="Last name">
    </div>
  </div>
</form>

Form - Sizing


<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">

Select Menu


<select class="custom-select w-100 custom-select-lg">
  <option selected>Select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="custom-select w-100">
  <option selected>Select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="custom-select w-100 custom-select-sm">
  <option selected>Select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Checkbox


<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Radio


<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
  <div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Click here to learn more about bootstrap forms.