#### Form Inputs

##### Default Input

##### Default Input - View Code

          <form>
              <div class="form-group">
                  <input type="text" class="form-control">
              </div>
          </form>

To use add `form-control` class to the input

##### Input With Helper Text

##### Input With Helper Text - View Code

          <form>
              <div class="form-group">
                  <input type="text" class="form-control" id="nametext" aria-describedby="name" placeholder="Name">
                  <small id="name" class="form-text text-muted">Helper Text</small>
              </div>
          </form>

Helper Text

##### Password

##### Password - View Code

          <form>
              <div class="form-group">
                  <input type="password" class="form-control" id="passtext" placeholder="Password">
              </div>
          </form>

##### Disabled Input

##### Disabled Input - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="text" class="form-control" id="nametext1" placeholder="Name" disabled>
              </div>
          </form>

Add attribute `disabled` to disable input field.

######

##### Predefined Input Value

##### Predefined Input Value - View Code

          <form class="mt-2">
              <div class="form-group">
                  <input type="text" class="form-control" id="prenametext" value="Name">
              </div>
          </form>

Add attribute `value="VALUE"` to set predefined value.

##### Readonly Input Field

##### Readonly Input Field - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="text" class="form-control" id="readonly" placeholder="Readonly Text" readonly>
              </div>
          </form>

Add attribute `readonly` to set field readonly.

##### Input With Placeholder

##### Input With Placeholder - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="text" class="form-control" id="placeholder" placeholder="Placeholder Text">
              </div>
          </form>

Add attribute `placeholder="..."` to input area.

##### Maximum Value

##### Maximum Value - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="text" class="form-control" maxlength="6" id="maxval" aria-describedby="maxval" placeholder="Name">
              </div>
          </form>

Add attribute `maxlength="6"` to input area.

##### Minimum Value

##### Minimum Value - View Code

          <form class="mt-4">
            <div class="form-group">
              <input type="text" class="form-control" minlength="5" id="minval" aria-describedby="minval" placeholder="Name">
            </div>
          </form>

Add attribute `minlength="5"` to input area.

##### Input Type Options

##### Input Type Text

##### Input Type Text - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="text" class="form-control" value="Name">
              </div>
          </form>

Using `input type="text"`

##### Input Type Password

##### Input Type Password - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="password" class="form-control" value="Name">
              </div>
          </form>

Using `input type="password"`

##### Input Phone Number

##### Input Phone Number - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="tel" class="form-control" value="1-(444)-444-4445">
              </div>
          </form>

Using `input type="tel"`

##### Input Type Email

##### Input Type Email - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="email" class="form-control" value="abc@example.com">
              </div>
          </form>

Using `input type="email"`

##### Input Type URL

##### Input Type URL - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="url" class="form-control" value="http://google.com">
              </div>
          </form>

Using `input type="url"`

##### Input Type Search

##### Input Type Search - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="search" class="form-control" value="how to...">
              </div>
          </form>

Using `input type="search"`

##### Input Type Numbers

##### Input Type Numbers - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="number" class="form-control" value="6029">
              </div>
          </form>

Using `input type="number"`

##### Input Type Date Time

##### Input Type Date Time - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="datetime-local" class="form-control" value="2008-05-13T22:33:00">
              </div>
          </form>

Using `input type="datetime-local"`

##### Input Type Date

##### Input Type Date - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="date" class="form-control" value="2018-05-13">
              </div>
          </form>

Using `input type="date"`

##### Input Type Time

##### Input Type Time - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="time" class="form-control" value="22:33:00">
              </div>
          </form>

Using `input type="time"`

##### Input Type Week

##### Input Type Week - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="week" class="form-control" value="2011-W33">
              </div>
          </form>

Using `input type="week"`

##### Input Type Month

##### Input Type Month - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="month" class="form-control" value="1999-08">
              </div>
          </form>

Using `input type="month"`

##### Input Type Color

##### Input Type Color - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="color" class="form-control" value="#563d7c">
              </div>
          </form>

Using `input type="color"`

##### Bootstrap Colorpicker

##### Bootstrap Colorpicker - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
              </div>
          </form>

Use `form-control-color` classs for bootstrap colorpicker

##### Input Type Range

##### Input Type Range - View Code

          <form class="mt-3">
              <div class="form-group">
                  <input type="range" class="form-range" id="customRange1">
              </div>
          </form>

Using `input type="range"`

##### General Textarea

##### Textarea

##### Textarea - View Code

          <form class="mt-3">
              <div class="form-group">
                  <textarea class="form-control" rows="3"></textarea>
              </div>
          </form>

##### Textarea With Placeholder

##### Textarea With Placeholder - View Code

          <form class="mt-3">
              <div class="form-group">
                  <textarea class="form-control" rows="3" placeholder="Text Here..."></textarea>
              </div>
          </form>

##### Textarea With Helper Text

##### Textarea With Helper Text - View Code

          <form>
              <div class="form-group">
                  <textarea class="form-control" rows="3" placeholder="Text Here..."></textarea>
                  <small id="textHelp" class="form-text text-muted">Helper Text</small>
              </div>
          </form>

Helper Text

##### Inline Checkboxes & Radios

##### Inline Default Checkbox

##### Inline Default Checkbox - View Code

          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
              <label class="form-check-label" for="inlineCheckbox1">1</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
              <label class="form-check-label" for="inlineCheckbox2">2</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
              <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
          </div>

1
2
3 (disabled)

##### Inline Default Radio Button

##### Inline Default Radio Button - View Code

          <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
              <label class="form-check-label" for="inlineRadio1">1</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
              <label class="form-check-label" for="inlineRadio2">2</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
              <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
          </div>

1
2
3 (disabled)

##### Inline Custom Checkbox

##### Inline Custom Checkbox - View Code

          <div class="form-check form-check-inline">
              <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="customCheck1">
                  <label class="custom-control-label" for="customCheck1">1</label>
              </div>
          </div>
          <div class="form-check form-check-inline">
              <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="customCheck2">
                  <label class="custom-control-label" for="customCheck2">2</label>
              </div>
          </div>
          <div class="form-check form-check-inline">
              <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="customCheck3" disabled="">
                  <label class="custom-control-label" for="customCheck3">3</label>
              </div>
          </div>

1
2
3

##### Inline Custom Radios

##### Inline Custom Radios - View Code

          <div class="form-check form-check-inline">
              <div class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked">
                  <label class="custom-control-label" for="customControlValidation2">1</label>
              </div>
          </div>
          <div class="form-check form-check-inline">
              <div class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked">
                  <label class="custom-control-label" for="customControlValidation3">2</label>
              </div>
          </div>
          <div class="form-check form-check-inline">
              <div class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" id="customControlValidation4" name="radio-stacked" disabled>
                  <label class="custom-control-label" for="customControlValidation4">3</label>
              </div>
          </div>

1
2
3

##### General Select

##### Select

##### Select - View Code

          <form class="mt-4">
              <div class="form-group mb-4">
                  <label for="exampleFormControlSelect1">Select No</label>
                  <select class="form-control" id="exampleFormControlSelect1">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                  </select>
              </div>
          </form>

Select No

##### Form Select

##### Form Select - View Code

          <form>
              <div class="form-group mb-4">
                  <label class="mr-sm-2" for="inlineFormCustomSelect">Select</label>
                  <select class="form-select mr-sm-2" id="inlineFormCustomSelect">
                      <option selected>Choose...</option>
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                  </select>
              </div>
          </form>

To use add `.form-select` class

Select

##### Multiple Select

##### Multiple Select - View Code

          <form>
              <select multiple class="form-control" id="exampleFormControlSelect2">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
              </select>
          </form>

To use add `multiple` to the field

##### Select With Addons

##### Select With Addons - View Code

          <form>
              <div class="input-group mb-3">
                  <label class="input-group-text" for="inputGroupSelect01">Options</label>
                  <select class="form-select" id="inputGroupSelect01">
                      <option selected>Choose...</option>
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                  </select>
              </div>
          </form>

To use add `.input-group-prepend` class to the div

Options

##### Select With Buttons

##### Select With Buttons - View Code

          <form>
              <div class="input-group">
                  <select class="form-select" id="inputGroupSelect04">
                      <option selected>Choose...</option>
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                  </select>
                      <button class="btn btn-outline-secondary" type="button">Button</button>
              </div>
          </form>

To use add `.input-group-append` class to the div

##### File Upload

##### Default File Upload

##### Default File Upload - View Code

          <form class="mt-3">
              <input class="form-control" type="file" id="formFile">
          </form>

To use add `.form-control-file` class to the input

##### Disabled File Upload

##### Disabled File Upload - View Code

    <form>
      <div class="mb-3">
        <input class="form-control" type="file" id="formFileDisabled" disabled>
      </div>
    </form>

To use add `disabled` attr to the input

##### Small File Upload

##### Small File Upload - View Code

    <form class="mt-4">
      <input class="form-control form-control-sm" id="formFileSm" type="file">
    </form>

To use add `.form-control-sm` class to the div

##### Large File Upload

##### Large File Upload - View Code

    <form class="mt-4">
      <input class="form-control form-control-lg" id="formFileLg" type="file">
    </form>

To use add `.form-control-lg` class to the div

##### Different Style in Helper Text

##### Left Helper Text

##### Left Helper Text - View Code

          <form class="mt-3">
              <div class="form-group">
                  <input type="text" class="form-control" id="nametext2" aria-describedby="name" placeholder="Name">
                  <div class="d-flex justify-content-start">
                      <small id="name1" class="badge badge-default text-info  bg-info-subtle form-text">Helper Text</small>
                  </div>
              </div>
          </form>

To use add `justify-content-start` class to the text

Helper Text

##### Center Helper Text

##### Center Helper Text - View Code

          <form class="mt-3">
              <div class="form-group mb-0">
                  <input type="text" class="form-control" id="nametext4" aria-describedby="name" placeholder="Name">
                  <p class="text-center mb-0">
                      <small id="name45" class="badge badge-default text-warning  bg-warning-subtle form-text">Helper Text</small>
                  </p>
              </div>
          </form>

To use add `text-center` class to the text

Helper Text

##### Right Helper Text

##### Right Helper Text - View Code

          <form class="mt-3">
              <div class="form-group">
                  <input type="text" class="form-control" id="nametext12" aria-describedby="name" placeholder="Name">
                  <div class="d-flex justify-content-end">
                      <small id="name13" class="badge badge-default text-danger  bg-danger-subtle form-text">Helper Text</small>
                  </div>
              </div>
          </form>

To use add `justify-content-end` class to the text

Helper Text

##### Inline Helper Text

##### Inline Helper Text - View Code

          <form class="mt-3">
              <div class="row">
                  <div class="col-md-8">
                      <input type="text" class="form-control" id="helpInput10" placeholder="Helper Text">
                  </div>
                  <div class="col-md-4">
                      <small class="text-muted">Helper Text</small>
                  </div>
              </div>
          </form>

Helper Text

##### Inline Helper Text With Color

##### Inline Helper Text With Color - View Code

          <form class="mt-3">
            <div class="row">
                <div class="col-md-8">
                    <input type="text" class="form-control" id="helpInput11" placeholder="Help Text">
                </div>
                <div class="col-md-4 block-tag">
                    <small class="badge bg-success-subtle text-success ">Helper Text</small>
                </div>
            </div>
          </form>

Helper Text

##### Input With Validaton

##### Input With Success

##### Input With Success - View Code

          <form class="mt-3">
            <label class="form-control-label" for="inputSuccess1">Input with success</label>
            <input type="text" class="form-control is-valid" id="inputSuccess1">
            <div class="valid-feedback">
                Success! You've done it.
            </div>
          </form>

To use add `is-valid` class to the input

Input with success
Success! You've done it.

##### Input With Danger

##### Input With Danger - View Code

          <form class="mt-3">
              <label class="form-control-label" for="inputDanger1">Input with danger</label>
              <input type="text" class="form-control is-invalid" id="inputDanger1">
              <div class="invalid-feedback">
                  Sorry, that username's taken. Try another?
              </div>
          </form>

To use add `is-invalid` class to the input

Input with danger
Sorry, that username's taken. Try another?

##### Inline Input With Success

##### Inline Input With Success - View Code

          <form class="mt-3 form-horizontal">
              <form class="mt-3 form-horizontal">
              <div class="form-group row">
                  <label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
                  <div class="col-sm-10">
                      <input type="email" class="form-control is-valid" id="inputHorizontalSuccess" placeholder="name@example.com">
                      <div class="valid-feedback">Success! You've done it.</div>
                  </div>
              </div>
          </form>

To use add `form-horizontal` class to the input

Email
Success! You've done it.

##### Inline Input With Danger

##### Inline Input With Danger - View Code

          <form class="mt-3 form-horizontal">
            <div class="form-group row">
                <label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control is-invalid" id="inputHorizontalDnger" placeholder="name@example.com">
                    <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
                </div>
            </div>
          </form>

To use add `form-horizontal` class to the input

Email
Sorry, that username's taken. Try another?

##### Input With Tooltip

##### Tooltip Bottom

##### Tooltip Bottom - View Code

          <form class="mt-3">
              <input type="text" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom" class="form-control" placeholder="Bottom">
          </form>

##### Tooltip Right

##### Tooltip Right - View Code

          <form class="mt-3">
              <input type="text" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right" class="form-control" placeholder="Right">
          </form>

##### Tooltip Top

##### Tooltip Top - View Code

          <form class="mt-3">
              <input type="text" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" class="form-control" placeholder="Top">
          </form>

##### Tooltip Left

##### Tooltip Left - View Code

          <form class="mt-3">
              <input type="text" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left" class="form-control" placeholder="Left">
          </form>

##### Input Text Styles

##### Input Text Bold

##### Input Text Bold - View Code

          <form class="mt-3">
              <input type="text" class="form-control fw-bold" placeholder="Bold Text">
          </form>

##### Input Text Normal

##### Input Text Normal - View Code

          <form class="mt-3">
              <input type="text" class="form-control fw-normal" placeholder="Normal Text">
          </form>

##### Input Text Light

##### Input Text Light - View Code

          <form class="mt-3">
              <input type="text" class="form-control fw-light" placeholder="Light Text">
          </form>

##### Input Text Italic

##### Input Text Italic - View Code

          <form class="mt-3">
              <input type="text" class="form-control font-italic" placeholder="Italic Text">
          </form>

##### Input Text Lowercase

##### Input Text Lowercase - View Code

          <form class="mt-3">
            <input type="text" class="form-control text-lowercase" placeholder="Lowercase">
          </form>

##### Input Text Uppercase

##### Input Text Uppercase - View Code

          <form class="mt-3">
              <input type="text" class="form-control text-uppercase" placeholder="Uppercase">
          </form>

##### Input Text Capitalize

##### Input Text Capitalize - View Code

          <form class="mt-3">
              <input type="text" class="form-control text-capitalize" placeholder="capitalize">
          </form>

##### Input Sizing

##### Small Input

##### Small Input - View Code

          <form class="mt-3">
              <input type="text" id="example-input-small" name="example-input-small" class="form-control form-control-sm" placeholder="Small">
          </form>

##### Normal Input

##### Normal Input - View Code

          <form class="mt-3">
            <input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal">
          </form>

##### Large Input

##### Large Input - View Code

          <form class="mt-3">
            <input type="text" id="example-input-large" name="example-input-large" class="form-control form-control-lg" placeholder="Large">
          </form>

#### Settings

###### Theme

Light Dark

###### Theme Direction

LTR RTL

###### Theme Colors

###### Layout Type

Vertical
Horizontal

###### Container Option

Boxed Full

###### Sidebar Type

Full
Collapse

###### Card With

Border Shadow