Basic Forms

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.

Preview
HTML

Text

Password

Helper text Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Select (Optional)

Multiple select

Textarea

                    
                      <form>
                        <div class="form-group">
                          <label class="input-label" for="exampleFormControlInput1">Text</label>
                          <input type="text" id="exampleFormControlInput1" class="form-control" placeholder="John Doe">
                        </div>

                        <div class="form-group">
                          <label class="input-label" for="exampleFormControlInput2">Password</label>
                          <input type="password" id="exampleFormControlInput2" class="form-control" value="********">
                        </div>

                        <div class="form-group">
                          <label class="input-label">Helper text</label>
                          <input type="password" class="form-control" value="**********">
                          <span class="text-muted font-size-1">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</span>
                        </div>

                        <div class="form-group">
                          <label class="input-label" for="exampleFormControlInput3">Email</label>
                          <input type="email" id="exampleFormControlInput3" class="form-control" placeholder="name@example.com">
                        </div>

                        <div class="form-group">
                          <label class="input-label" for="exampleFormControlSelect1">Select <span class="input-label-secondary">(Optional)</span></label>
                          <select id="exampleFormControlSelect1" class="form-control">
                            <option>Choose an option</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                          </select>
                        </div>

                        <div class="form-group">
                          <label class="input-label" for="exampleFormControlSelect2">Multiple select</label>
                          <select id="exampleFormControlSelect2" class="form-control" size="3" multiple>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                          </select>
                        </div>

                        <div class="form-group">
                          <label class="input-label" for="exampleFormControlTextarea1">Textarea</label>
                          <textarea id="exampleFormControlTextarea1" class="form-control" placeholder="Textarea field" rows="4"></textarea>
                        </div>
                      </form>

Custom <select> menus need only a custom class, .custom-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.

Preview
HTML

                    
                      <!-- Select -->
                      <select class="custom-select">
                        <option selected="">Open this select menu</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                      <!-- End Select -->

You may also choose from small and large custom selects to match our similarly sized text inputs.

Preview
HTML

                    
                      <!-- Select -->
                      <select class="custom-select custom-select-lg mb-3">
                        <option selected="">Open this select menu</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                      <!-- End Select -->

                      <!-- Select -->
                      <select class="custom-select custom-select-sm">
                        <option selected="">Open this select menu</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                      <!-- End Select -->

Custom file input

For file inputs, swap the .form-control for .form-control-file.

Preview
HTML

File input

Choose file

                    
                      <!-- Form Group -->
                      <div class="form-group">
                        <label>File input</label>
                        <div class="custom-file">
                          <input type="file" id="customFileEg1" class="custom-file-input">
                          <label class="custom-file-label" for="customFileEg1">Choose file</label>
                        </div>
                      </div>
                      <!-- End Form Group -->

Pilled

Use the .form-control-pill and .custom-select-pill modifier classes to make forms more rounded (with a larger border-radius and additional horizontal padding).

Preview
HTML

Full name

Gender

                    
                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlPilledFullName" class="input-label">Full name</label>

                        <input type="text" class="form-control form-control-pill" id="formControlPilledFullName" placeholder="Mark Williams" aria-label="Mark Williams">
                      </div>
                      <!-- End Input Group -->

                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlPilledEmail" class="input-label">Email</label>

                        <input type="text" class="form-control form-control-pill" id="formControlPilledEmail" placeholder="mark@example.com" aria-label="mark@example.com">
                      </div>
                      <!-- End Input Group -->

                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlPilledGenderSelect" class="input-label">Gender</label>

                        <select id="formControlPilledGenderSelect" class="custom-select custom-select-pill">
                          <option>Choose a gender</option>
                          <option>Male</option>
                          <option>Female</option>
                          <option>Other</option>
                        </select>
                      </div>
                      <!-- End Input Group -->

Borderless

Add .input-group-borderless for an input and .custom-select-borderless for a select without borders.

Preview
HTML

Full name

Gender

                    
                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlBorderlessFullName" class="input-label">Full name</label>

                        <input type="text" class="form-control form-control-borderless form-control-flush" id="formControlBorderlessFullName" placeholder="Mark Williams" aria-label="Mark Williams">
                      </div>
                      <!-- End Input Group -->

                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlBorderlessEmail" class="input-label">Email</label>

                        <input type="text" class="form-control form-control-borderless form-control-flush" id="formControlBorderlessEmail" placeholder="mark@example.com" aria-label="mark@example.com">
                      </div>
                      <!-- End Input Group -->

                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlBorderlessGenderSelect" class="input-label">Gender</label>

                        <select id="formControlBorderlessGenderSelect" class="custom-select custom-select-borderless">
                          <option>Choose a gender</option>
                          <option>Male</option>
                          <option>Female</option>
                          <option>Other</option>
                        </select>
                      </div>
                      <!-- End Input Group -->

Flush

Add .form-control-flush and .custom-select-flush to remove some borders and rounded corners to render input edge-to-edge in a parent container.

Preview
HTML

Full name

Gender

                    
                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlFlushFullName" class="input-label">Full name</label>

                        <input type="text" class="form-control form-control-flush" id="formControlFlushFullName" placeholder="Mark Williams" aria-label="Mark Williams">
                      </div>
                      <!-- End Input Group -->

                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlFlushEmail" class="input-label">Email</label>

                        <input type="text" class="form-control form-control-flush" id="formControlFlushEmail" placeholder="mark@example.com" aria-label="mark@example.com">
                      </div>
                      <!-- End Input Group -->

                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlFlushGenderSelect" class="input-label">Gender</label>

                        <select id="formControlFlushGenderSelect" class="custom-select custom-select-flush">
                          <option>Choose a gender</option>
                          <option>Male</option>
                          <option>Female</option>
                          <option>Other</option>
                        </select>
                      </div>
                      <!-- End Input Group -->

Light

.form-control-light and .custom-select-light classes add light background color.

Preview
HTML

Full name

Gender

                    
                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlLightFullName" class="input-label">Full name</label>

                        <input type="text" class="form-control form-control-light" id="formControlLightFullName" placeholder="Mark Williams" aria-label="Mark Williams">
                      </div>
                      <!-- End Input Group -->

                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlLightEmail" class="input-label">Email</label>

                        <input type="text" class="form-control form-control-light" id="formControlLightEmail" placeholder="mark@example.com" aria-label="mark@example.com">
                      </div>
                      <!-- End Input Group -->

                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlLightGenderSelect" class="input-label">Gender</label>

                        <select id="formControlLightGenderSelect" class="custom-select custom-select-light">
                          <option>Choose a gender</option>
                          <option>Male</option>
                          <option>Female</option>
                          <option>Other</option>
                        </select>
                      </div>
                      <!-- End Input Group -->

Hover light

.form-control-hover-light and .custom-select-hover-light add light background color on hover.

Preview
HTML

Full name

Gender

                    
                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlHoverLightFullName" class="input-label">Full name</label>

                        <input type="text" class="form-control form-control-hover-light" id="formControlHoverLightFullName" placeholder="Mark Williams" aria-label="Mark Williams">
                      </div>
                      <!-- End Input Group -->

                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlHoverLightEmail" class="input-label">Email</label>

                        <input type="text" class="form-control form-control-hover-light" id="formControlHoverLightEmail" placeholder="mark@example.com" aria-label="mark@example.com">
                      </div>
                      <!-- End Input Group -->

                      <!-- Input Group -->
                      <div class="form-group">
                        <label for="formControlHoverLightGenderSelect" class="input-label">Gender</label>

                        <select id="formControlHoverLightGenderSelect" class="custom-select custom-select-hover-light">
                          <option>Choose a gender</option>
                          <option>Male</option>
                          <option>Female</option>
                          <option>Other</option>
                        </select>
                      </div>
                      <!-- End Input Group -->

                    
                      <form>
                        <div class="form-group">
                          <label class="input-label">Range input</label>
                          <input type="range" class="custom-range" value="3" min="0" max="10">
                        </div>
                      </form>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

Preview
HTML

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

Disabled & Readonly Fields

Use readonly or disabled attributes for .form-control

Preview
HTML

Readonly plain text

Readonly field

                    
                      <div class="form-group row">
                        <label class="col-sm-3 col-form-label">Readonly plain text</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control-plaintext" value="email@example.com" readonly>
                        </div>
                      </div>

                      <div class="form-group row">
                        <label class="col-sm-3 col-form-label">Readonly field</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" value="Read only" readonly>
                        </div>
                      </div>

Preview
HTML

Disabled input

Disabled select

Disabled textarea

Disabled file input

Choose file

Disabled range input

                    
                      <div class="form-group">
                        <label>Disabled input</label>
                        <input type="text" class="form-control" placeholder="Disabled input" disabled>
                      </div>

                      <div class="form-group">
                        <label>Disabled select</label>
                        <select class="custom-select" disabled>
                          <option>Choose an option</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                      </div>

                      <div class="form-group">
                        <label>Disabled textarea</label>
                        <textarea class="form-control" placeholder="Disabled textarea" disabled></textarea>
                      </div>

                      <div class="form-group">
                        <label>Disabled file input</label>
                        <div class="custom-file">
                          <input type="file" id="customFileEg2" class="custom-file-input" disabled>
                          <label class="custom-file-label" for="customFileEg2">Choose file</label>
                        </div>
                      </div>

                      <div class="form-group">
                        <label>Disabled range input</label>
                        <input type="range" class="custom-range" value="3" min="0" max="10" disabled>
                      </div>

Validation states

It provides valuable, actionable feedback to your users with HTML5 form validation.

Preview
HTML

                    
                      <form>
                        <div class="form-group">
                          <label for="validationValidInput1">Valid input</label>
                          <input type="text" class="form-control is-valid" id="validationValidInput1" placeholder="Placeholder">
                        </div>

                        <div class="form-group">
                          <label for="validationValidSelect1">Valid select</label>
                          <select class="form-control custom-select is-valid" id="validationValidSelect1">
                            <option>Choose an option</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                          </select>
                          <span class="valid-feedback">Valid feedback</span>
                        </div>

                        <div class="form-group">
                          <label for="validationValidTextarea1">Valid textarea</label>
                          <textarea class="form-control is-valid" placeholder="Textarea field" id="validationValidTextarea1" rows="4"></textarea>
                        </div>

                        <div class="form-group">
                          <label for="validationValidFileInput1">Valid file input</label>
                          <div class="custom-file">
                            <input type="file" id="validationValidFileInput1" class="custom-file-input is-valid">
                            <label class="form-control custom-file-label" for="validationValidFileInput1">Choose file</label>
                          </div>
                        </div>
                      </form>

Preview
HTML

                    
                      <form>
                        <div class="form-group">
                          <label for="validationInvalidInput1">Valid input</label>
                          <input type="text" class="form-control is-invalid" id="validationInvalidInput1" placeholder="Placeholder">
                        </div>

                        <div class="form-group">
                          <label for="validationInvalidSelect1">Valid select</label>
                          <select class="form-control custom-select is-invalid" id="validationInvalidSelect1">
                            <option>Choose an option</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                          </select>
                          <span class="invalid-feedback">Valid feedback</span>
                        </div>

                        <div class="form-group">
                          <label for="validationInvalidTextarea1">Valid textarea</label>
                          <textarea class="form-control is-invalid" placeholder="Textarea field" id="validationInvalidTextarea1" rows="4"></textarea>
                        </div>

                        <div class="form-group">
                          <label for="validationInvalidFileInput1">Valid file input</label>
                          <div class="custom-file">
                            <input type="file" id="validationInvalidFileInput1" class="custom-file-input is-invalid">
                            <label class="form-control custom-file-label" for="validationInvalidFileInput1">Choose file</label>
                          </div>
                        </div>
                      </form>

Basic Forms

Basic forms

Select menu

Custom file input

Pilled

Borderless

Flush

Light

Hover light

Range input

Sizing

Disabled & Readonly Fields

Validation states