Bootstrap docs

# Forms

Form control styles, layout options, and custom components.

Range slider depends on noUISlider plugin. Make sure to link to the plugin's css and js files in your document.

CSS file is linked in the `<head>` section and above `theme.min.css` reference in your document:

    <link rel="stylesheet" href="assets/vendor/nouislider/dist/nouislider.min.css">

JavaScript file is linked before the closing `</body>` tag and above `theme.min.js` reference in your document:

    <script src="assets/vendor/nouislider/dist/nouislider.min.js"></script>

The Custom select component relies on the Choices.js plugin. To use this component, make sure to include the required reference to the plugin's css and js files in your document:

    <link rel="stylesheet" href="assets/vendor/choices.js/public/assets/styles/choices.min.css">
    <script src="assets/vendor/choices.js/public/assets/scripts/choices.min.js"></script>

#### Supported input types

Text
Search
Email
URL
Phone
Password
Textarea
Hello World!
Select
Multiselect
File
Number
Datalist
Range
Color

    <!-- Text input -->
    <div class="mb-3">
      <label for="text-input" class="form-label">Text</label>
      <input type="text" class="form-control" id="text-input" value="Artisanal kale">
    </div>

    <!-- Search input -->
    <div class="mb-3">
      <label for="search-input" class="form-label">Search</label>
      <input type="search" class="form-control" id="search-input" value="How do I shoot web">
    </div>

    <!-- Email input -->
    <div class="mb-3">
      <label for="email-input" class="form-label">Email</label>
      <input type="email" class="form-control" id="email-input" value="email@example.com">
    </div>

    <!-- URL input -->
    <div class="mb-3">
      <label for="url-input" class="form-label">URL</label>
      <input type="url" class="form-control" id="url-input" value="https://getbootstrap.com">
    </div>

    <!-- Phone input -->
    <div class="mb-3">
      <label for="tel-input" class="form-label">Phone</label>
      <input type="tel" class="form-control" id="tel-input" value="1-(770)-334-2518">
    </div>

    <!-- Password input -->
    <div class="mb-3">
      <label for="pass-input" class="form-label">Password</label>
      <input type="password" class="form-control" id="pass-input" value="mypasswordexample">
    </div>

    <!-- Textarea -->
    <div class="mb-3">
      <label for="textarea-input" class="form-label">Textarea</label>
      <textarea class="form-control" id="textarea-input" rows="5">Hello World!</textarea>
    </div>

    <!-- Select -->
    <div class="mb-3">
      <label for="select-input" class="form-label">Select</label>
      <select class="form-select" id="select-input" aria-label="Default select example">
        <option selected disabled>Choose option...</option>
        <option value="1">Option item 1</option>
        <option value="2">Option item 2</option>
        <option value="3">Option item 3</option>
      </select>
    </div>

    <!-- Multiselect -->
    <div class="mb-3">
      <label for="multiselect-input" class="form-label">Multiselect</label>
      <select class="form-select" id="multiselect-input" size="3" multiple aria-label="Multiple select example">
        <option value="1" selected>Option item 1</option>
        <option value="2">Option item 2</option>
        <option value="3">Option item 3</option>
        <option value="4">Option item 4</option>
        <option value="5">Option item 5</option>
        <option value="6">Option item 6</option>
      </select>
    </div>

    <!-- File input -->
    <div class="mb-3">
      <label for="file-input" class="form-label">File</label>
      <input type="file" class="form-control" id="file-input">
    </div>

    <!-- Number input -->
    <div class="mb-3">
      <label for="number-input" class="form-label">Number</label>
      <input type="number" class="form-control" id="number-input" value="37">
    </div>

    <!-- Datalist -->
    <div class="mb-3">
      <label for="datalist-input" class="form-label">Datalist</label>
      <input type="text" class="form-control" list="datalist-options" id="datalist-input" placeholder="Type to search...">
      <datalist id="datalist-options">
        <option value="San Francisco">
        <option value="New York">
        <option value="Seattle">
        <option value="Los Angeles">
        <option value="Chicago">
      </datalist>
    </div>

    <!-- Range input -->
    <div class="mb-3">
      <label for="range-input" class="form-label">Range</label>
      <input type="range" class="form-range" id="range-input">
    </div>

    <!-- Color input -->
    <div class="mb-3">
      <label for="color-input" class="form-label">Color</label>
      <input type="color" class="form-control form-control-color" id="color-input" value="#ffa14a">
    </div>

#### Floating labels

Your name
Your country
Your message

    <!-- Floating label: Text input -->
    <div class="form-floating mb-3">
      <input class="form-control" type="text" id="fl-text" placeholder="Your name">
      <label for="fl-text">Your name</label>
    </div>

    <!-- Floating label: Select -->
    <div class="form-floating mb-3">
      <select class="form-select" id="fl-select" aria-label="Floating label select">
        <option value="Argentina" selected>Argentina</option>
        <option value="Belgium">Belgium</option>
        <option value="France">France</option>
        <option value="Germany">Germany</option>
        <option value="Japan">Japan</option>
        <option value="Spain">Spain</option>
        <option value="USA">USA</option>
      </select>
      <label for="fl-select">Your country</label>
    </div>

    <!-- Floating label: Textarea -->
    <div class="form-floating mb-3">
      <textarea class="form-control" id="fl-textarea" style="height: 120px;" placeholder="Your message"></textarea>
      <label for="fl-textarea">Your message</label>
    </div>

#### Custom select

Learn more about this component in Select box section.

Basic example
Search example

    <!-- Basic example of custom select -->
    <label class="form-label">Basic example</label>
    <div class="mb-3">
      <select class="form-select" data-select aria-label="Basic select example">
        <option value="">Select country...</option>
        <option value="Argentina">Argentina</option>
        <option value="Belgium">Belgium</option>
        <option value="Denmark">Denmark</option>
        <option value="France">France</option>
        <option value="Germany">Germany</option>
        <option value="Japan">Japan</option>
        <option value="Switzerland">Switzerland</option>
      </select>
    </div>

    <!-- Added search functionality -->
    <label class="form-label">Search example</label>
    <div class="mb-3">
      <select class="form-select" data-select='{"searchEnabled": true}' aria-label="Select with search">
        <option value="">Select country...</option>
        <option value="Argentina">Argentina</option>
        <option value="Belgium">Belgium</option>
        <option value="Denmark">Denmark</option>
        <option value="France">France</option>
        <option value="Germany">Germany</option>
        <option value="Japan">Japan</option>
        <option value="Poland">Poland</option>
        <option value="Spain">Spain</option>
        <option value="Switzerland">Switzerland</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="United Kingdom">United States</option>
      </select>
    </div>

#### Password visibility toggle

Password

    <!-- Password visibility toggle -->
    <div class="mb-3">
      <label for="pass-visibility" class="form-label">Password</label>
      <div class="password-toggle">
        <input type="password" class="form-control" id="pass-visibility" value="hidden@password">
        <label class="password-toggle-button" aria-label="Show/hide password">
          <input type="checkbox" class="btn-check">
        </label>
      </div>
    </div>

#### Checkboxes

Check this checkbox
Uncheck this checkbox
Disabled checkbox
Disabled checked
Check this checkbox
Uncheck this checkbox
Disabled checkbox
Disabled checked

    <!-- Stacked checkboxes -->
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="ex-check-1">
      <label for="ex-check-1" class="form-check-label">Check this checkbox</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="ex-check-2" checked>
      <label for="ex-check-2" class="form-check-label">Uncheck this checkbox</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="ex-check-3" disabled>
      <label for="ex-check-3" class="form-check-label">Disabled checkbox</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="ex-check-4" checked disabled>
      <label for="ex-check-4" class="form-check-label">Disabled checked</label>
    </div>

    <!-- Inline checkboxes -->
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="ex-check-5">
      <label for="ex-check-5" class="form-check-label">Check this checkbox</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="ex-check-6" checked>
      <label for="ex-check-6" class="form-check-label">Uncheck this checkbox</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="ex-check-7" disabled>
      <label for="ex-check-7" class="form-check-label">Disabled checkbox</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="ex-check-8" checked disabled>
      <label for="ex-check-8" class="form-check-label">Disabled checked</label>
    </div>

#### Radio buttons

Toggle this radio
Toggle this radio
Disabled radio
Disabled checked
Toggle this radio
Toggle this radio
Disabled radio
Disabled checked

    <!-- Stacked radio buttons -->
    <div class="form-check">
      <input type="radio" class="form-check-input" id="ex-radio-1" name="radio">
      <label for="ex-radio-1" class="form-check-label">Toggle this radio</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="ex-radio-2" name="radio" checked>
      <label for="ex-radio-2" class="form-check-label">Toggle this radio</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="ex-radio-3" disabled>
      <label for="ex-radio-3" class="form-check-label">Disabled radio</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="ex-radio-4" checked disabled>
      <label for="ex-radio-4" class="form-check-label">Disabled checked</label>
    </div>

    <!-- Inline radio buttons -->
    <div class="form-check form-check-inline">
      <input type="radio" class="form-check-input" id="ex-radio-5" name="radio-inline">
      <label for="ex-radio-5" class="form-check-label">Toggle this radio</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="radio" class="form-check-input" id="ex-radio-6" name="radio-inline" checked>
      <label for="ex-radio-6" class="form-check-label">Toggle this radio</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="radio" class="form-check-input" id="ex-radio-7" disabled>
      <label for="ex-radio-7" class="form-check-label">Disabled radio</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="radio" class="form-check-input" id="ex-radio-8" checked disabled>
      <label for="ex-radio-8" class="form-check-label">Disabled checked</label>
    </div>

#### Switches

Default switch checkbox
Checked switch checkbox
Disabled switch checkbox
Disabled checked switch checkbox

    <!-- Idle switch -->
    <div class="form-check form-switch">
      <input type="checkbox" class="form-check-input" role="switch" id="ex-switch-1">
      <label for="ex-switch-1" class="form-check-label">Default switch checkbox</label>
    </div>

    <!-- Checked switch -->
    <div class="form-check form-switch">
      <input type="checkbox" class="form-check-input" role="switch" id="ex-switch-2" checked>
      <label for="ex-switch-2" class="form-check-label">Checked switch checkbox</label>
    </div>

    <!-- Disabled switch -->
    <div class="form-check form-switch">
      <input type="checkbox" class="form-check-input" role="switch" id="ex-switch-3" disabled>
      <label for="ex-switch-3" class="form-check-label">Disabled switch checkbox</label>
    </div>

    <!-- Checked disabled switch -->
    <div class="form-check form-switch">
      <input type="checkbox" class="form-check-input" role="switch" id="ex-switch-4" checked disabled>
      <label for="ex-switch-4" class="form-check-label">Disabled checked switch checkbox</label>
    </div>

#### Button toggles (Color, size options)

Sizes
XL L M S XS
Model
64 GB 128 GB 256 GB 512 GB
Color: Gray blue
Gray blue Pink Light blue Green
Color: Viridian
Viridian Green Blue

    <!-- All these components depend on Bootstrap's button-check which can either be radio button or checkbox. -->

    <!-- Size options made of .btn-outline-secondary -->
    <div class="mb-4">
      <label class="form-label pb-1 mb-2">Sizes</label>
      <div class="d-flex flex-wrap gap-2">
        <input type="radio" class="btn-check" name="size-options" id="size-1" checked>
        <label for="size-1" class="btn btn-icon btn-sm btn-outline-secondary">XL</label>
        <input type="radio" class="btn-check" name="size-options" id="size-2">
        <label for="size-2" class="btn btn-icon btn-sm btn-outline-secondary">L</label>
        <input type="radio" class="btn-check" name="size-options" id="size-3">
        <label for="size-3" class="btn btn-icon btn-sm btn-outline-secondary">M</label>
        <input type="radio" class="btn-check" name="size-options" id="size-4" disabled>
        <label for="size-4" class="btn btn-icon btn-sm btn-outline-secondary">S</label>
        <input type="radio" class="btn-check" name="size-options" id="size-5">
        <label for="size-5" class="btn btn-icon btn-sm btn-outline-secondary">XS</label>
      </div>
    </div>

    <!-- Model options made of .btn-outline-secondary -->
    <div class="mb-4">
      <label class="form-label pb-1 mb-2">Model</label>
      <div class="d-flex flex-wrap gap-2">
        <input type="radio" class="btn-check" name="model-options" id="model-1" checked>
        <label for="model-1" class="btn btn-sm btn-outline-secondary">64 GB</label>
        <input type="radio" class="btn-check" name="model-options" id="model-2">
        <label for="model-2" class="btn btn-sm btn-outline-secondary">128 GB</label>
        <input type="radio" class="btn-check" name="model-options" id="model-3">
        <label for="model-3" class="btn btn-sm btn-outline-secondary">256 GB</label>
        <input type="radio" class="btn-check" name="model-options" id="model-4" disabled>
        <label for="model-4" class="btn btn-sm btn-outline-secondary">512 GB</label>
      </div>
    </div>

    <!-- Color options made of .btn-color with binded label -->
    <div class="mb-4">
      <label class="form-label pb-1 mb-2">Color: <span class="text-body fw-normal" id="colorOption">Gray blue</span></label>
      <div class="d-flex flex-wrap gap-2" data-binded-label="#colorOption">
        <input type="radio" class="btn-check" name="color-options" id="color-1" checked>
        <label for="color-1" class="btn btn-color fs-xl" data-label="Gray blue" style="color: #5a7aa1">
          <span class="visually-hidden">Gray blue</span>
        </label>
        <input type="radio" class="btn-check" name="color-options" id="color-2">
        <label for="color-2" class="btn btn-color fs-xl" data-label="Pink" style="color: #ee7976">
          <span class="visually-hidden">Pink</span>
        </label>
        <input type="radio" class="btn-check" name="color-options" id="color-3">
        <label for="color-3" class="btn btn-color fs-xl" data-label="Light blue" style="color: #9acbf1">
          <span class="visually-hidden">Light blue</span>
        </label>
        <input type="radio" class="btn-check" name="color-options" id="color-4">
        <label for="color-4" class="btn btn-color fs-xl" data-label="Green" style="color: #8cd1ab">
          <span class="visually-hidden">Green</span>
        </label>
      </div>
    </div>

    <!-- Color options made of .btn-image with binded label -->
    <div class="mb-4">
      <label class="form-label pb-1 mb-2">Color: <span class="text-body fw-normal" id="colorImageOption">Viridian</span></label>
      <div class="d-flex flex-wrap gap-2" data-binded-label="#colorImageOption">
        <input type="radio" class="btn-check" name="color-image-options" id="colorImage-1" checked>
        <label for="colorImage-1" class="btn btn-image p-0" data-label="Viridian">
          <img src="assets/img/shop/furniture/product/colors/color01.png" width="56" alt="Viridian color">
          <span class="visually-hidden">Viridian</span>
        </label>
        <input type="radio" class="btn-check" name="color-image-options" id="colorImage-2">
        <label for="colorImage-2" class="btn btn-image p-0" data-label="Green">
          <img src="assets/img/shop/furniture/product/colors/color02.png" width="56" alt="Green color">
          <span class="visually-hidden">Green</span>
        </label>
        <input type="radio" class="btn-check" name="color-image-options" id="colorImage-3">
        <label for="colorImage-3" class="btn btn-image p-0" data-label="Blue">
          <img src="assets/img/shop/furniture/product/colors/color03.png" width="56" alt="Blue color">
          <span class="visually-hidden">Blue</span>
        </label>
      </div>
    </div>

#### Count input (+/-)

    <!-- The number input within the Count Input component accepts two attributes: "min" and "max." See it in action in the first example below. -->
    <!-- Small count input -->
    <div class="count-input rounded-2 mb-3">
      <button type="button" class="btn btn-icon btn-sm" data-decrement aria-label="Decrement quantity">
        <i class="ci-minus"></i>
      </button>
      <input type="number" class="form-control form-control-sm" value="1" min="1" max="5" readonly>
      <button type="button" class="btn btn-icon btn-sm" data-increment aria-label="Increment quantity">
        <i class="ci-plus"></i>
      </button>
    </div>

    <!-- Normal count input -->
    <div class="count-input mb-3">
      <button type="button" class="btn btn-icon" data-decrement aria-label="Decrement quantity">
        <i class="ci-minus"></i>
      </button>
      <input type="number" class="form-control" value="1" readonly>
      <button type="button" class="btn btn-icon" data-increment aria-label="Increment quantity">
        <i class="ci-plus"></i>
      </button>
    </div>

    <!-- Large count input -->
    <div class="count-input mb-3">
      <button type="button" class="btn btn-icon btn-lg" data-decrement aria-label="Decrement quantity">
        <i class="ci-minus"></i>
      </button>
      <input type="number" class="form-control form-control-lg" value="1" readonly>
      <button type="button" class="btn btn-icon btn-lg" data-increment aria-label="Increment quantity">
        <i class="ci-plus"></i>
      </button>
    </div>

    <!-- Disabled count input -->
    <div class="count-input disabled">
      <button type="button" class="btn btn-icon disabled" data-decrement aria-label="Decrement quantity">
        <i class="ci-minus"></i>
      </button>
      <input type="number" class="form-control" value="1" disabled>
      <button type="button" class="btn btn-icon disabled" data-increment aria-label="Increment quantity">
        <i class="ci-plus"></i>
      </button>
    </div>

#### Range slider

Two handles + inputs
With value scale (pips)
One handle + no inputs

    <!-- Range slider: Two handles + inputs -->
    <label class="form-label" id="slider-label-1">Two handles + inputs</label>
    <div class="range-slider pb-2 mb-4" data-range-slider='{"startMin": 280, "startMax": 720, "min": 0, "max": 1000, "step": 1, "tooltipPrefix": "$"}' aria-labelledby="slider-label-1">
      <div class="range-slider-ui"></div>
      <div class="d-flex align-items-center">
        <div class="position-relative w-50">
          <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
          <input type="number" class="form-control form-icon-start" min="0" data-range-slider-min>
        </div>
        <i class="ci-minus text-body-emphasis mx-2"></i>
        <div class="position-relative w-50">
          <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
          <input type="number" class="form-control form-icon-start" min="0" data-range-slider-max>
        </div>
      </div>
    </div>

    <!-- Range slider: With value scale (pips) -->
    <label class="form-label" id="slider-label-2">With value scale (pips)</label>
    <div class="range-slider pb-2 mb-4" data-range-slider='{"startMin": 250, "startMax": 680, "min": 0, "max": 1000, "step": 1, "pips": true, "tooltipPrefix": "$"}' aria-labelledby="slider-label-2">
      <div class="range-slider-ui"></div>
      <div class="d-flex align-items-center pt-4">
        <div class="position-relative w-50">
          <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
          <input type="number" class="form-control form-icon-start" min="0" data-range-slider-min>
        </div>
        <i class="ci-minus text-body-emphasis mx-2"></i>
        <div class="position-relative w-50">
          <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
          <input type="number" class="form-control form-icon-start" min="0" data-range-slider-max>
        </div>
      </div>
    </div>

    <!-- One handle + no inputs -->
    <label class="form-label" id="slider-label-3">One handle + no inputs</label>
    <div class="range-slider" data-range-slider='{"startMin": 450, "min": 0, "max": 1000, "step": 1, "tooltipPrefix": "$"}' aria-labelledby="slider-label-3">
      <div class="range-slider-ui"></div>
      <input type="hidden" class="form-control" data-range-slider-min>
    </div>

#### Shapes

    <!-- Alter the shape of .form-control component with .rounded-* utility classes. -->

    <!-- Rounded text input -->
    <input type="text" class="form-control mb-3" placeholder="Rounded input">

    <!-- Pill text input -->
    <input type="text" class="form-control rounded-pill mb-3" placeholder="Pill input">

    <!-- Square text input -->
    <input type="text" class="form-control rounded-0 mb-3" placeholder="Square input">

    <!-- Rounded select -->
    <select class="form-select mb-3" aria-label="Rounded select">
      <option selected disabled>Choose option...</option>
      <option value="1">Option item 1</option>
      <option value="2">Option item 2</option>
      <option value="3">Option item 3</option>
    </select>

    <!-- Pill select -->
    <select class="form-select rounded-pill mb-3" aria-label="Pill select">
      <option selected disabled>Choose option...</option>
      <option value="1">Option item 1</option>
      <option value="2">Option item 2</option>
      <option value="3">Option item 3</option>
    </select>

    <!-- Square select -->
    <select class="form-select rounded-0 mb-3" aria-label="Square select">
      <option selected disabled>Choose option...</option>
      <option value="1">Option item 1</option>
      <option value="2">Option item 2</option>
      <option value="3">Option item 3</option>
    </select>

#### Sizes

Large input
Normal input
Small input
Large select
Normal select
Small select

    <!-- Large text input -->
    <div class="mb-3">
      <label for="input-lg" class="form-label fs-base">Large input</label>
      <input type="text" class="form-control form-control-lg" id="input-lg" placeholder="Large input placeholder">
    </div>

    <!-- Normal text input -->
    <div class="mb-3">
      <label for="input-md" class="form-label">Normal input</label>
      <input type="text" class="form-control" id="input-md" placeholder="Normal input placeholder">
    </div>

    <!-- Small text input -->
    <div class="mb-3">
      <label for="input-sm" class="form-label fs-xs">Small input</label>
      <input type="text" class="form-control form-control-sm" id="input-sm" placeholder="Small input placeholder">
    </div>

    <!-- Large select -->
    <div class="mb-3">
      <label for="select-lg" class="form-label fs-base">Large select</label>
      <select class="form-select form-select-lg" id="select-lg">
        <option selected disabled>Choose option...</option>
        <option value="1">Option item 1</option>
        <option value="2">Option item 2</option>
        <option value="3">Option item 3</option>
      </select>
    </div>

    <!-- Normal select -->
    <div class="mb-3">
      <label for="select-md" class="form-label">Normal select</label>
      <select class="form-select" id="select-md">
        <option selected disabled>Choose option...</option>
        <option value="1">Option item 1</option>
        <option value="2">Option item 2</option>
        <option value="3">Option item 3</option>
      </select>
    </div>

    <!-- Small select -->
    <div class="mb-3">
      <label for="select-sm" class="form-label fs-xs">Small select</label>
      <select class="form-select form-select-sm" id="select-sm">
        <option selected disabled>Choose option...</option>
        <option value="1">Option item 1</option>
        <option value="2">Option item 2</option>
        <option value="3">Option item 3</option>
      </select>
    </div>

#### Readonly & disabled

    <!-- Readonly text input -->
    <input type="text" class="form-control mb-3" value="Readonly input" readonly>

    <!-- Readonly plain text input -->
    <input type="text" class="form-control-plaintext fs-sm mb-3" value="Plain text input" readonly>

    <!-- Disabled text input -->
    <input type="text" class="form-control mb-3" value="Disabled input" disabled>

    <!-- Disabled select -->
    <select class="form-select mb-3" aria-label="Disabled select" disabled>
      <option selected disabled>Disabled select</option>
      <option value="1">Option item 1</option>
      <option value="2">Option item 2</option>
      <option value="3">Option item 3</option>
    </select>

#### Inline form

Full name
Preference
Remember me

    <!-- Inline form built with rows and columns -->
    <form class="row row-cols-sm-auto g-3 align-items-center">
      <div class="col-12">
        <label for="inline-form-input" class="visually-hidden">Full name</label>
        <input type="text" class="form-control" id="inline-form-input" placeholder="Full name">
      </div>
      <div class="col-12">
        <label for="inline-form-input" class="visually-hidden">Preference</label>
        <select class="form-select" id="inline-form-select">
          <option selected disabled>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
      </div>
      <div class="col-12">
        <div class="form-check">
          <input type="checkbox" id="inline-form-check" class="form-check-input">
          <label for="inline-form-check" class="form-check-label">Remember me</label>
        </div>
      </div>
      <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>

#### Help text

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

    <!-- Adding helper description text to the form input with .form-text -->
    <label for="inputPassword" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Your password..." aria-labelledby="passwordHelpBlock">
    <div class="form-text" id="passwordHelpBlock">
      Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
    </div>

#### Validation: status text

First name
Looks good!
Last name
Looks good!
Username
Please choose a username.
Looks good!
City
Please provide a valid city.
Looks good!
State
Please provide a valid state.
Looks good!
Zip
Please provide a valid zip.
Looks good!
Agree to terms and conditions
You must agree before submitting.

    <!-- Forms validation: status text -->
    <form class="needs-validation" novalidate>
      <div class="row">
        <div class="col-md-4 mb-3">
          <label for="validationText01" class="form-label">First name</label>
          <input type="text" class="form-control" id="validationText01" placeholder="First name" value="John" required>
          <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-md-4 mb-3">
          <label for="validationText02" class="form-label">Last name</label>
          <input type="text" class="form-control" id="validationText02" placeholder="Last name" value="Doe" required>
          <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-md-4 mb-3">
          <label for="validationTextUsername" class="form-label">Username</label>
          <input type="text" class="form-control" id="validationTextUsername" placeholder="Username" required>
          <div class="invalid-feedback">Please choose a username.</div>
          <div class="valid-feedback">Looks good!</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="validationText03" class="form-label">City</label>
          <select class="form-select" id="validationText03" required>
            <option value="" selected disabled>Choose city...</option>
            <option value="Dallas">Dallas</option>
            <option value="Houston">Houston</option>
            <option value="Los Angeles">Los Angeles</option>
            <option value="Miami">Miami</option>
            <option value="New York">New York</option>
          </select>
          <div class="invalid-feedback">Please provide a valid city.</div>
          <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="validationText04" class="form-label">State</label>
          <select class="form-select" id="validationText04" required>
            <option value="" selected disabled>Choose state...</option>
            <option value="Arizona">Arizona</option>
            <option value="Colorado">Colorado</option>
            <option value="Florida">Florida</option>
            <option value="Indiana">Indiana</option>
            <option value="Kentucky">Kentucky</option>
            <option value="Texas">Texas</option>
          </select>
          <div class="invalid-feedback">Please provide a valid state.</div>
          <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="validationText05" class="form-label">Zip</label>
          <input type="text" class="form-control" id="validationText05" placeholder="Zip" required>
          <div class="invalid-feedback">Please provide a valid zip.</div>
          <div class="valid-feedback">Looks good!</div>
        </div>
      </div>
      <div class="mb-3">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="validationText06" required>
          <label for="validationText06" class="form-check-label">Agree to terms and conditions</label>
          <div class="invalid-feedback">You must agree before submitting.</div>
        </div>
      </div>
      <button class="btn btn-primary" type="submit">Submit form</button>
    </form>

#### Validation: status tooltips

First name
Looks good!
Last name
Looks good!
Username
Please choose a username.
Looks good!
City
Please provide a valid city.
Looks good!
State
Please provide a valid state.
Looks good!
Zip
Please provide a valid zip.
Looks good!
Agree to terms and conditions
You must agree before submitting.

    <!-- Forms validation: status tooltips -->
    <form class="needs-validation" novalidate>
      <div class="row">
        <div class="col-md-4 position-relative mb-4">
          <label for="validationTooltipt01" class="form-label">First name</label>
          <input type="text" class="form-control" id="validationTooltipt01" placeholder="First name" value="John" required>
          <div class="valid-tooltip">Looks good!</div>
        </div>
        <div class="col-md-4 position-relative mb-4">
          <label for="validationTooltipt02" class="form-label">Last name</label>
          <input type="text" class="form-control" id="validationTooltipt02" placeholder="Last name" value="Doe" required>
          <div class="valid-tooltip">Looks good!</div>
        </div>
        <div class="col-md-4 position-relative mb-4">
          <label for="validationTooltiptUsername" class="form-label">Username</label>
          <input type="text" class="form-control" id="validationTooltiptUsername" placeholder="Username" required>
          <div class="invalid-tooltip">Please choose a username.</div>
          <div class="valid-tooltip">Looks good!</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 position-relative mb-4">
          <label for="validationTooltipt03" class="form-label">City</label>
          <select class="form-select" id="validationTooltipt03" required>
            <option value="" selected disabled>Choose city...</option>
            <option value="Dallas">Dallas</option>
            <option value="Houston">Houston</option>
            <option value="Los Angeles">Los Angeles</option>
            <option value="Miami">Miami</option>
            <option value="New York">New York</option>
          </select>
          <div class="invalid-tooltip">Please provide a valid city.</div>
          <div class="valid-tooltip">Looks good!</div>
        </div>
        <div class="col-md-3 position-relative mb-4">
          <label for="validationTooltipt04" class="form-label">State</label>
          <select class="form-select" id="validationTooltipt04" required>
            <option value="" selected disabled>Choose state...</option>
            <option value="Arizona">Arizona</option>
            <option value="Colorado">Colorado</option>
            <option value="Florida">Florida</option>
            <option value="Indiana">Indiana</option>
            <option value="Kentucky">Kentucky</option>
            <option value="Texas">Texas</option>
          </select>
          <div class="invalid-tooltip">Please provide a valid state.</div>
          <div class="valid-tooltip">Looks good!</div>
        </div>
        <div class="col-md-3 position-relative mb-4">
          <label for="validationTooltipt05" class="form-label">Zip</label>
          <input type="text" class="form-control" id="validationTooltipt05" placeholder="Zip" required>
          <div class="invalid-tooltip">Please provide a valid zip.</div>
          <div class="valid-tooltip">Looks good!</div>
        </div>
      </div>
      <div class="position-relative mb-4">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="validationTooltipt06" required>
          <label for="validationTooltipt06" class="form-check-label">Agree to terms and conditions</label>
          <div class="invalid-tooltip">You must agree before submitting.</div>
        </div>
      </div>
      <button class="btn btn-primary" type="submit">Submit form</button>
    </form>

Top