Default Input

                                          
      <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

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

Password

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

Disabled Input

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

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

Using input type="color"

Bootstrap Colorpicker

                                                                                  
      <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

                                                                                  
      <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

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

Textarea With Placeholder

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

Textarea With Helper Text

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

Inline Checkboxes & Radios

Inline Default Checkbox

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

3 (disabled)

Inline Default Radio Button

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

3 (disabled)

Inline Custom Checkbox

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

Inline Custom Radios

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

General Select

Select

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

Form Select

                                                                                  
      <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

Multiple Select

                                                                                  
      <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

                                                                                  
      <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

Select With Buttons

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
<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

                                                                                  
<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

                                                                                  
<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

                                                                                  
      <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

Center Helper Text

                                                                                  
      <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

Right Helper Text

                                                                                  
      <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

Inline Helper Text

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

Inline Helper Text With Color

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

Input With Validaton

Input With Success

                                                                                  
      <form class="mt-3">
        <label class="form-" 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 Danger

                                                                                  
      <form class="mt-3">
          <label class="form-" 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

Inline Input With Success

                                                                                  
      <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

Inline Input With Danger

                                                                                  
      <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

Input With Tooltip

Tooltip Bottom

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

                                                                                  
      <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

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

Input Text Normal

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

Input Text Light

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

Input Text Italic

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

Input Text Lowercase

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

Input Text Uppercase

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

Input Text Capitalize

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

Input Sizing

Small Input

                                                                                  
      <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

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

Large Input

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