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>