# Forms

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

## Inputs

### Default

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

### Alternative

If you want to use forms on grayish background colors, you can use this beautiful alternative style which removes the borders and it is emphasized only by its shadow.

    <div class="p-4 bg-secondary">
        <input type="text" class="form-control form-control-alternative" placeholder="Alternative input">
    </div>

### Flush

Remove all borders and shadows so you can use it inside other elements:

    <input type="text" class="form-control form-control-flush" placeholder="Fulshed input">

### Muted

Remove all borders and shadows so you can use it inside other elements:

    <input type="text" class="form-control form-control-muted" placeholder="Muted input">

## Form controls

Textual form controls—like `<input>`s, `<select>`s, and `<textarea>`s—are styled with the `.form-control` class. Included are styles for general appearance, focus state, sizing, and more.

For all form control you can apply the additional modifier classes explained in the Inputs section: `.form-control-alternative`, `.form-control-flush` and `.form-control-muted`.

Email address
Example select
Example multiple select
Example textarea

    <form>
      <div class="form-group">
        <label for="exampleFormControlInput1">Email address</label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
      </div>
      <div class="form-group">
        <label for="exampleFormControlSelect1">Example select</label>
        <select class="form-control" id="exampleFormControlSelect1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <div class="form-group">
        <label for="exampleFormControlSelect2">Example multiple select</label>
        <select multiple class="form-control" id="exampleFormControlSelect2">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <div class="form-group">
        <label for="exampleFormControlTextarea1">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
      </div>
    </form>

### File browser

Select file

    <form>
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="customFileLang" lang="en">
            <label class="custom-file-label" for="customFileLang">Select file</label>
        </div>
    </form>

### HTML5 inputs

Text
Search
Email
URL
Phone
Password
Number
Datetime
Date
Month
Week
Time
Color

    <form>
        <div class="form-group">
            <label for="example-text-input" class="form-control-label">Text</label>
            <input class="form-control" type="text" value="John Snow" id="example-text-input">
        </div>
        <div class="form-group">
            <label for="example-search-input" class="form-control-label">Search</label>
            <input class="form-control" type="search" value="Tell me your secret ..." id="example-search-input">
        </div>
        <div class="form-group">
            <label for="example-email-input" class="form-control-label">Email</label>
            <input class="form-control" type="email" value="argon@example.com" id="example-email-input">
        </div>
        <div class="form-group">
            <label for="example-url-input" class="form-control-label">URL</label>
            <input class="form-control" type="url" value="https://www.creative-tim.com" id="example-url-input">
        </div>
        <div class="form-group">
            <label for="example-tel-input" class="form-control-label">Phone</label>
            <input class="form-control" type="tel" value="40-(770)-888-444" id="example-tel-input">
        </div>
        <div class="form-group">
            <label for="example-password-input" class="form-control-label">Password</label>
            <input class="form-control" type="password" value="password" id="example-password-input">
        </div>
        <div class="form-group">
            <label for="example-number-input" class="form-control-label">Number</label>
            <input class="form-control" type="number" value="23" id="example-number-input">
        </div>
        <div class="form-group">
            <label for="example-datetime-local-input" class="form-control-label">Datetime</label>
            <input class="form-control" type="datetime-local" value="2018-11-23T10:30:00" id="example-datetime-local-input">
        </div>
        <div class="form-group">
            <label for="example-date-input" class="form-control-label">Date</label>
            <input class="form-control" type="date" value="2018-11-23" id="example-date-input">
        </div>
        <div class="form-group">
            <label for="example-month-input" class="form-control-label">Month</label>
            <input class="form-control" type="month" value="2018-11" id="example-month-input">
        </div>
        <div class="form-group">
            <label for="example-week-input" class="form-control-label">Week</label>
            <input class="form-control" type="week" value="2018-W23" id="example-week-input">
        </div>
        <div class="form-group">
            <label for="example-time-input" class="form-control-label">Time</label>
            <input class="form-control" type="time" value="10:30:00" id="example-time-input">
        </div>
        <div class="form-group">
            <label for="example-color-input" class="form-control-label">Color</label>
            <input class="form-control" type="color" value="#5e72e4" id="example-color-input">
        </div>
    </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 class="form-control form-control-lg">
      <option>Large select</option>
    </select>
    <select class="form-control">
      <option>Default select</option>
    </select>
    <select class="form-control form-control-sm">
      <option>Small select</option>
    </select>

## Custom forms

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

### Checkboxes

Check this custom checkbox

    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
    </div>

### Radios

Toggle this custom radio
Or toggle this other custom radio

    <div class="custom-control custom-radio mb-3">
      <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
      <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
      <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
    </div>

### Inline

Toggle this custom radio
Or toggle this other custom radio

    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
      <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
      <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
    </div>

### Disabled

Check this custom checkbox
Toggle this custom radio

    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
      <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
    </div>

    <div class="custom-control custom-radio">
      <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
      <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
    </div>

### Toggles

    <label class="custom-toggle">
      <input type="checkbox" checked>
      <span class="custom-toggle-slider rounded-circle"></span>
    </label>

### Labeled toggles

    <label class="custom-toggle">
        <input type="checkbox" checked>
        <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
    </label>

### Sliders

    <!-- Simple slider -->
    <div class="input-slider-container">
      <div id="input-slider" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>
      <!-- Input slider values -->
      <div class="row mt-3">
        <div class="col-6">
          <span id="input-slider-value" class="range-slider-value" data-range-value-low="100"></span>
        </div>
      </div>
    </div>

    <div class="mt-5">
      <!-- Range slider container -->
      <div id="input-slider-range" data-range-value-min="100" data-range-value-max="500"></div>
      <!-- Range slider values -->
      <div class="row">
          <div class="col-6">
              <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low"></span>
          </div>
          <div class="col-6 text-right">
              <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high"></span>
          </div>
      </div>
    </div>