Forms

<!-- Text Input -->
<div class="form-group">
  <label class="text-muted" for="text-input">Text</label>
  <input class="form-control" type="text" id="text-input" value="Artisanal kale">
</div>

<!-- Search Input -->
<div class="form-group">
  <label class="text-muted" for="search-input">Search</label>
  <input class="form-control" type="search" id="search-input" value="How do I shoot web">
</div>

<!-- Email Input -->
<div class="form-group">
  <label class="text-muted" for="email-input">Email</label>
  <input class="form-control" type="email" id="email-input" value="email@example.com">
</div>

<!-- URL Input -->
<div class="form-group">
  <label class="text-muted" for="url-input">URL</label>
  <input class="form-control" type="url" id="url-input" value="https://getbootstrap.com">
</div>

<!-- Phone Input -->
<div class="form-group">
  <label class="text-muted" for="tel-input">Phone</label>
  <input class="form-control" type="tel" id="tel-input" value="1-(770)-334-2518">
</div>

<!-- Password Input -->
<div class="form-group">
  <label class="text-muted" for="pass-input">Password</label>
  <input class="form-control" type="password" id="pass-input" value="mypasswordexample">
</div>

<!-- Textarea -->
<div class="form-group">
  <label class="text-muted" for="textarea-input">Textarea</label>
  <textarea class="form-control" id="textarea-input" rows="5">Hello World!</textarea>
</div>

<!-- Select -->
<div class="form-group">
  <label class="text-muted" for="select-input">Select</label>
  <select class="form-control" id="select-input">
    <option>Choose option...</option>
    <option>Option item 1</option>
    <option>Option item 2</option>
    <option>Option item 3</option>
  </select>
</div>

<!-- Multiselect -->
<div class="form-group">
  <label class="text-muted" for="multiselect-input">Multiselect</label>
  <select class="form-control" id="multiselect-input" size="3" multiple>
    <option>Option item 1</option>
    <option>Option item 2</option>
    <option>Option item 3</option>
    <option>Option item 4</option>
    <option>Option item 5</option>
    <option>Option item 6</option>
  </select>
</div>

<!-- File Input -->
<div class="form-group">
  <label class="text-muted" for="file-input">File</label>
  <div class="custom-file">
    <input class="custom-file-input" type="file" id="file-input">
    <label class="custom-file-label" for="file-input">Choose file...</label>
  </div>
</div>

<!-- Number Input -->
<div class="form-group">
  <label class="text-muted" for="number-input">Number</label>
  <input class="form-control" type="number" id="number-input" value="37">
</div>

<!-- Date Time Input -->
<div class="form-group">
  <label class="text-muted" for="date-time-input">Date and time</label>
  <input class="form-control" type="datetime-local" id="date-time-input">
</div>

<!-- Date Input -->
<div class="form-group">
  <label class="text-muted" for="date-input">Date</label>
  <input class="form-control" type="date" id="date-input" value="2018-06-13">
</div>

<!-- Month Input -->
<div class="form-group">
  <label class="text-muted" for="month-input">Month</label>
  <input class="form-control" type="month" id="month-input" value="2018-06">
</div>

<!-- Week Input -->
<div class="form-group">
  <label class="text-muted" for="week-input">Week</label>
  <input class="form-control" type="week" id="week-input" value="2018-W33">
</div>

<!-- Time Input -->
<div class="form-group">
  <label class="text-muted" for="time-input">Time</label>
  <input class="form-control" type="time" id="time-input" value="14:45:00">
</div>

<!-- Color Input -->
<div class="form-group">
  <label class="text-muted" for="color-input">Color</label>
  <input class="form-control" type="color" id="color-input" value="#f5f5f5">
</div>

<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
  <input class="custom-control-input" type="checkbox" id="ex-check-1">
  <label class="custom-control-label" for="ex-check-1">Check this checkbox</label>
</div>
<div class="custom-control custom-checkbox">
  <input class="custom-control-input" type="checkbox" id="ex-check-2" checked>
  <label class="custom-control-label" for="ex-check-2">Uncheck this checkbox</label>
</div>
<div class="custom-control custom-checkbox">
  <input class="custom-control-input" type="checkbox" id="ex-check-3" disabled>
  <label class="custom-control-label" for="ex-check-3">Disabled checkbox</label>
</div>

<!-- Radio Buttons -->
<div class="custom-control custom-radio">
  <input class="custom-control-input" type="radio" id="ex-radio-1" name="radio">
  <label class="custom-control-label" for="ex-radio-1">Toggle this radio</label>
</div>
<div class="custom-control custom-radio">
  <input class="custom-control-input" type="radio" id="ex-radio-2" name="radio" checked>
  <label class="custom-control-label" for="ex-radio-2">Toggle this radio</label>
</div>
<div class="custom-control custom-radio">
  <input class="custom-control-input" type="radio" id="ex-radio-3" name="radio" disabled>
  <label class="custom-control-label" for="ex-radio-3">Disabled radio</label>
</div>

<!-- Inline Checkboxes -->
<div class="custom-control custom-checkbox custom-control-inline">
  <input class="custom-control-input" type="checkbox" id="ex-check-4">
  <label class="custom-control-label" for="ex-check-4">Check this checkbox</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
  <input class="custom-control-input" type="checkbox" id="ex-check-5" checked>
  <label class="custom-control-label" for="ex-check-5">Uncheck this checkbox</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
  <input class="custom-control-input" type="checkbox" id="ex-check-6" disabled>
  <label class="custom-control-label" for="ex-check-6">Disabled checkbox</label>
</div>

<!-- Inline Radio Buttons -->
<div class="custom-control custom-radio custom-control-inline">
  <input class="custom-control-input" type="radio" id="ex-radio-4" name="radio2">
  <label class="custom-control-label" for="ex-radio-4">Toggle this radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input class="custom-control-input" type="radio" id="ex-radio-5" name="radio2" checked>
  <label class="custom-control-label" for="ex-radio-5">Toggle this radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input class="custom-control-input" type="radio" id="ex-radio-6" name="radio2" disabled>
  <label class="custom-control-label" for="ex-radio-6">Disabled radio</label>
</div>

<!-- Switch -->
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>

<!-- Disabled switch -->
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

<!-- Large Input -->
<div class="form-group">
  <label for="large-input">Large input</label>
  <input class="form-control form-control-lg" type="text" id="large-input" placeholder="Large input placeholder">
</div>

<!-- Normal Input -->
<div class="form-group">
  <label for="normal-input">Normal input</label>
  <input class="form-control" type="text" id="normal-input" placeholder="Normal input placeholder">
</div>

<!-- Small Input -->
<div class="form-group">
  <label for="small-input">Small input</label>
  <input class="form-control form-control-sm" type="text" id="small-input" placeholder="Small input placeholder">
</div>

<!-- Readonly Input -->
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

<!-- Disabled Input -->
<input class="form-control" type="text" placeholder="Disabled input here..." disabled>

<!-- Disabled Select -->
<select class="form-control" disabled>
  <option>Disabled select here...</option>
  <option>Option item 1</option>
  <option>Option item 2</option>
  <option>Option item 3</option>
</select>

<!-- Inline Form -->
<form class="form-inline">
  <label class="sr-only">Name</label>
  <input class="form-control mb-3 mr-sm-4" type="text" placeholder="John Doe">
  <label class="sr-only">Username</label>
  <input class="form-control mb-3 mr-sm-4" type="text" placeholder="Username">
  <div class="custom-control custom-checkbox mb-3 mr-4">
    <input class="custom-control-input" type="checkbox" id="inline-form-check-1">
    <label class="custom-control-label" for="inline-form-check-1">Remember me</label>
  </div>
  <button class="btn btn-primary mb-3" type="submit">Submit</button>
</form>

<!-- Form Help Text -->
<div class="form-group">
  <label for="help-text-input">Password</label>
  <input class="form-control" type="password" id="help-text-input" placeholder="Your password here">
  <small class="form-text text-muted">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
</div>

<!-- Forms Validation: Status Text -->
<form class="container needs-validation pb-5" novalidate>
  <div class="row">
    <div class="col-md-4 form-group">
      <label for="validationCustom01">First name</label>
      <input class="form-control" type="text" id="validationCustom01" placeholder="First name" value="John" required>
      <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="col-md-4 form-group">
      <label for="validationCustom02">Last name</label>
      <input class="form-control" type="text" id="validationCustom02" placeholder="Last name" value="Doe" required>
      <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="col-md-4 form-group">
      <label for="validationCustomUsername">Username</label>
      <input class="form-control" type="text" id="validationCustomUsername" placeholder="Username" required>
      <div class="invalid-feedback">Please choose a username.</div>
      <div class="valid-feedback">Looks good!</div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 form-group">
      <label for="validationCustom03">City</label>
      <select class="form-control" id="validationCustom03" required>
        <option value="">Choose city...</option>
        <option value="Dallas">Dallas</option>
        <option value="Houston">Houston</option>
        <option value="Los Angeles">Los Angeles</option>
        <option value="Miami">Miami</option>
        <option value="New York">New York</option>
      </select>
      <div class="invalid-feedback">Please provide a valid city.</div>
      <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="col-md-3 form-group">
      <label for="validationCustom04">State</label>
      <select class="form-control" id="validationCustom04" required>
        <option value="">Choose state...</option>
        <option value="Arizona">Arizona</option>
        <option value="Colorado">Colorado</option>
        <option value="Florida">Florida</option>
        <option value="Indiana">Indiana</option>
        <option value="Kentucky">Kentucky</option>
        <option value="Texas">Texas</option>
      </select>
      <div class="invalid-feedback">Please provide a valid state.</div>
      <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="col-md-3 form-group">
      <label for="validationCustom05">Zip</label>
      <input class="form-control" type="text" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">Please provide a valid zip.</div>
      <div class="valid-feedback">Looks good!</div>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" id="invalidCheck" required>
      <label class="custom-control-label" for="invalidCheck">Agree to terms and conditions</label>
      <div class="invalid-feedback">You must agree before submitting.</div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit Form</button>
</form>

<!-- Forms Validation: Status Tooltips -->
<form class="container needs-validation" novalidate>
  <div class="row">
    <div class="col-md-4 form-group">
      <label for="validationTooltip01">First name</label>
      <input class="form-control" type="text" id="validationTooltip01" placeholder="First name" value="John" required>
      <div class="valid-tooltip">Looks good!</div>
    </div>
    <div class="col-md-4 form-group">
      <label for="validationTooltip02">Last name</label>
      <input class="form-control" type="text" id="validationTooltip02" placeholder="Last name" value="Doe" required>
      <div class="valid-tooltip">Looks good!</div>
    </div>
    <div class="col-md-4 form-group">
      <label for="validationTooltipUsername">Username</label>
      <input class="form-control" type="text" id="validationTooltipUsername" placeholder="Username" required>
      <div class="invalid-tooltip">Please choose a username.</div>
      <div class="valid-tooltip">Looks good!</div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 form-group">
      <label for="validationTooltip03">City</label>
      <select class="form-control" id="validationTooltip03" required>
        <option value="">Choose city...</option>
        <option value="Dallas">Dallas</option>
        <option value="Houston">Houston</option>
        <option value="Los Angeles">Los Angeles</option>
        <option value="Miami">Miami</option>
        <option value="New York">New York</option>
      </select>
      <div class="invalid-tooltip">Please provide a valid city.</div>
      <div class="valid-tooltip">Looks good!</div>
    </div>
    <div class="col-md-3 form-group">
      <label for="validationTooltip04">State</label>
      <select class="form-control" id="validationTooltip04" required>
        <option value="">Choose state...</option>
        <option value="Arizona">Arizona</option>
        <option value="Colorado">Colorado</option>
        <option value="Florida">Florida</option>
        <option value="Indiana">Indiana</option>
        <option value="Kentucky">Kentucky</option>
        <option value="Texas">Texas</option>
      </select>
      <div class="invalid-tooltip">Please provide a valid state.</div>
      <div class="valid-tooltip">Looks good!</div>
    </div>
    <div class="col-md-3 form-group">
      <label for="validationTooltip05">Zip</label>
      <input class="form-control" type="text" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">Please provide a valid zip.</div>
      <div class="valid-tooltip">Looks good!</div>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" id="invalidCheck01" required>
      <label class="custom-control-label" for="invalidCheck01">Agree to terms and conditions</label>
      <div class="invalid-tooltip">You must agree before submitting.</div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit Form</button>
</form>

<!-- Input Text Light Skin -->
<div class="form-group">
  <label class="text-white opacity-60" for="text-input-light">Text</label>
  <input class="form-control form-control-light-skin" type="text" id="text-input-light" value="Artisanal kale">
</div>

<!-- Textarea Light Skin -->
<div class="form-group">
  <label class="text-white opacity-60" for="textarea-input-light">Textarea</label>
  <textarea class="form-control form-control-light-skin" id="textarea-input-light" rows="5">Hello World!</textarea>
</div>

<!-- Select Light Skin -->
<div class="form-group">
  <label class="text-white opacity-60" for="select-input-light">Select</label>
  <select class="form-control form-control-light-skin" id="select-input-light">
    <option>Choose option...</option>
    <option>Option item 1</option>
    <option>Option item 2</option>
    <option>Option item 3</option>
  </select>
</div>

<!-- File Input Light Skin -->
<div class="custom-file form-control-light-skin">
  <input class="custom-file-input" type="file" id="file-input-light">
  <label class="custom-file-label" for="file-input-light">Choose file...</label>
</div>

<!-- Checkbox Light Skin -->
<div class="custom-control custom-checkbox">
  <input class="custom-control-input" type="checkbox" id="check-light">
  <label class="custom-control-label text-white" for="check-light">Check this checkbox</label>
</div>

<!-- Radio Button Light Skin -->
<div class="custom-control custom-radio">
  <input class="custom-control-input" type="radio" id="radio-light" name="radio-light">
  <label class="custom-control-label text-white" for="radio-light">Check this radio</label>
</div>