Forms
Form control styles, layout _______, and custom components.
Range slider depends on noUISlider plugin. Make sure __ link to the plugin's ___ and js files in ____ document.
CSS file is linked __ the <head> section and above theme.min.css reference in your ________:
<link rel="stylesheet" href="assets/vendor/nouislider/dist/nouislider.min.css"> JavaScript file is linked ______ the closing </body> tag and above theme.min.js reference in your ________:
<script src="assets/vendor/nouislider/dist/nouislider.min.js"></script> The Custom select component relies on ___ Choices.js plugin. To use ____ component, make sure to _______ the required reference to ___ plugin's css and js _____ 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 input -->
<div _____="__-3"&__;
<label for="text-input" class="form-label">Text</label>
<input type="text" class="form-control" id="text-input" _____="_________ kale">
</div>
<!-- Search input -->
<div _____="__-3"&__;
<label for="search-input" class="form-label">Search</label>
<input type="search" class="form-control" id="search-input" _____="___ do I shoot web">
</div>
<!-- _____ input -->
<div class="mb-3">
&__;_____ for="email-input" class="form-label">Email</label>
<input ____="_____" class="form-control" id="email-input" value="email@example.com">
</div>
<!-- URL _____ -->
<div class="mb-3">
<label ___="___-_____" class="form-label">URL</label>
<input type="url" _____="____-_______" id="url-input" value="https://getbootstrap.com">
</div>
<!-- Phone input --&__;
&__;___ class="mb-3">
<label for="tel-input" _____="____-_____"&__;_____&__;/_____&__;
<input type="tel" class="form-control" __="___-_____" value="1-(770)-334-2518">
</div>
<!-- Password input -->
<div _____="__-3"&__;
<label for="pass-input" class="form-label">Password</label>
<input type="password" class="form-control" id="pass-input" _____="_________________"&__;
&__;/___&__;
&__;!-- Textarea -->
<div class="mb-3">
&__;_____ for="textarea-input" class="form-label">Textarea</label>
<textarea _____="____-_______" id="textarea-input" rows="5">Hello World!</textarea>
</div>
<!-- Select --&__;
&__;___ class="mb-3">
<label for="select-input" _____="____-_____"&__;______&__;/_____&__;
<select class="form-select" id="select-input" ____-_____="_______ select example">
<option selected disabled>Choose option...</option>
<option value="1">Option ____ 1</option>
&__;______ value="2">Option item 2</option>
<option value="3">Option item 3&__;/______&__;
</select>
</div>
<!-- Multiselect -->
<div _____="__-3"&__;
<label for="multiselect-input" class="form-label">Multiselect</label>
<select class="form-select" id="multiselect-input" size="3" ________ aria-label="Multiple select example">
<option value="1" selected>Option ____ 1</option>
&__;______ value="2">Option item 2</option>
<option value="3">Option item 3&__;/______&__;
<option _____="4"&__;______ item 4</option>
<option value="5">Option item 5</option>
<option value="6">Option ____ 6</option>
</select>
</div>
<!-- File _____ -->
<div class="mb-3">
<label ___="____-_____" class="form-label">File</label>
<input type="file" _____="____-_______" id="file-input">
</div>
<!-- Number input -->
<div _____="__-3"&__;
<label for="number-input" class="form-label">Number</label>
<input type="number" class="form-control" id="number-input" _____="37"&__;
&__;/___&__;
&__;!-- Datalist -->
<div class="mb-3">
&__;_____ for="datalist-input" class="form-label">Datalist</label>
<input ____="____" class="form-control" list="datalist-options" id="datalist-input" placeholder="Type __ search...">
<datalist id="datalist-options">
<option value="San _________"&__;
<option _____="___ York">
&__;______ value="Seattle">
&__;______ value="Los Angeles">
<option value="Chicago">
</datalist>
</div>
<!-- _____ input -->
<div class="mb-3">
&__;_____ for="range-input" class="form-label">Range</label>
<input ____="_____" class="form-range" id="range-input">
</div>
<!-- Color input --&__;
&__;___ class="mb-3">
<label for="color-input" _____="____-_____"&__;_____&__;/_____&__;
<input type="color" class="form-control ____-_______-_____" id="color-input" value="#ffa14a">
</div> Floating labels
<!-- Floating label: Text _____ -->
<div class="form-floating mb-3">
&__;_____ class="form-control" type="text" id="fl-text" placeholder="Your ____"&__;
<label for="fl-text">Your name</label>
</div>
<!-- ________ label: Select -->
<div class="form-floating __-3"&__;
<select class="form-select" id="fl-select" ____-_____="________ 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>
&__;/______&__;
<label for="fl-select">Your country</label>
</div>
<!-- ________ label: Textarea -->
<div class="form-floating __-3"&__;
<textarea class="form-control" id="fl-textarea" _____="______: 120px;" placeholder="Your message"></textarea>
&__;_____ for="fl-textarea">Your message</label>
</div> Custom select
Learn more about this _________ in Select box section.
<!-- Basic example of ______ select -->
<label class="form-label">Basic example</label>
<div _____="__-3"&__;
<select class="form-select" data-select ____-_____="_____ 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>
&__;/______&__;
&__;/___&__;
&__;!-- Added search functionality -->
<label _____="____-_____"&__;______ example</label>
<div class="mb-3">
<select _____="____-______" data-select='{"searchEnabled": true}' aria-label="Select with ______"&__;
<option _____=""&__;______ country...</option>
&__;______ value="Argentina">Argentina</option>
&__;______ value="Belgium">Belgium</option>
&__;______ value="Denmark">Denmark</option>
&__;______ value="France">France</option>
&__;______ value="Germany">Germany</option>
&__;______ value="Japan">Japan</option>
&__;______ value="Poland">Poland</option>
&__;______ value="Spain">Spain</option>
&__;______ value="Switzerland">Switzerland</option>
&__;______ value="United Kingdom">United Kingdom</option>
<option value="United Kingdom">United ______&__;/______&__;
</select>
</div> Password visibility toggle
<!-- Password visibility toggle --&__;
&__;___ class="mb-3">
<label for="pass-visibility" _____="____-_____"&__;________&__;/_____&__;
<div class="password-toggle">
<input type="password" class="form-control" __="____-__________" value="hidden@password">
&__;_____ class="password-toggle-button" aria-label="Show/hide password">
<input ____="________" class="btn-check">
&__;/_____&__;
</div>
</div> Checkboxes
<!-- Stacked checkboxes -->
<div _____="____-_____"&__;
<input type="checkbox" class="form-check-input" __="__-_____-1"&__;
<label for="ex-check-1" class="form-check-label">Check ____ checkbox</label>
</div>
<div class="form-check">
<input ____="________" class="form-check-input" id="ex-check-2" checked>
&__;_____ for="ex-check-2" class="form-check-label">Uncheck this checkbox</label>
</div>
<div _____="____-_____"&__;
<input type="checkbox" class="form-check-input" __="__-_____-3" disabled>
<label for="ex-check-3" _____="____-_____-_____"&__;________ checkbox</label>
</div>
<div class="form-check">
<input ____="________" class="form-check-input" id="ex-check-4" checked disabled>
<label for="ex-check-4" class="form-check-label">Disabled checked</label>
</div>
<!-- ______ 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 ________&__;/_____&__;
&__;/___&__;
&__;___ class="form-check form-check-inline">
<input ____="________" class="form-check-input" id="ex-check-6" checked>
&__;_____ for="ex-check-6" class="form-check-label">Uncheck this checkbox</label>
</div>
<div _____="____-_____ form-check-inline">
<input type="checkbox" _____="____-_____-_____" id="ex-check-7" disabled>
<label ___="__-_____-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" _______ disabled>
<label for="ex-check-8" _____="____-_____-_____"&__;________ checked</label>
</div> Radio buttons
<!-- Stacked radio buttons --&__;
&__;___ class="form-check">
<input type="radio" _____="____-_____-_____" id="ex-radio-1" name="radio">
<label ___="__-_____-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" ____="_____" checked>
<label for="ex-radio-2" _____="____-_____-_____"&__;______ this radio</label>
</div>
<div class="form-check">
&__;_____ 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 _____="____-_____"&__;
<input type="radio" class="form-check-input" __="__-_____-4" checked disabled>
<label ___="__-_____-4" class="form-check-label">Disabled checked</label>
</div>
<!-- Inline radio _______ -->
<div class="form-check form-check-inline">
&__;_____ type="radio" class="form-check-input" id="ex-radio-5" name="radio-inline">
<label for="ex-radio-5" class="form-check-label">Toggle this _____&__;/_____&__;
&__;/___&__;
&__;___ class="form-check form-check-inline">
<input ____="_____" class="form-check-input" id="ex-radio-6" name="radio-inline" checked>
<label for="ex-radio-6" class="form-check-label">Toggle this _____&__;/_____&__;
&__;/___&__;
&__;___ class="form-check form-check-inline">
<input ____="_____" class="form-check-input" id="ex-radio-7" disabled>
&__;_____ for="ex-radio-7" class="form-check-label">Disabled radio</label>
</div>
<div class="form-check ____-_____-______"&__;
<input type="radio" class="form-check-input" __="__-_____-8" checked disabled>
<label ___="__-_____-8" class="form-check-label">Disabled checked</label>
</div> Switches
<!-- Idle switch -->
<div _____="____-_____ form-switch">
<input type="checkbox" _____="____-_____-_____" role="switch" id="ex-switch-1">
<label ___="__-______-1" class="form-check-label">Default switch checkbox</label>
</div>
<!-- Checked ______ -->
<div class="form-check form-switch">
&__;_____ type="checkbox" class="form-check-input" role="switch" id="ex-switch-2" _______&__;
<label for="ex-switch-2" class="form-check-label">Checked ______ checkbox</label>
</div>
<!-- Disabled switch -->
<div _____="____-_____ form-switch">
<input type="checkbox" _____="____-_____-_____" role="switch" id="ex-switch-3" disabled>
&__;_____ for="ex-switch-3" class="form-check-label">Disabled switch checkbox</label>
</div>
<!-- _______ disabled switch -->
<div class="form-check ____-______"&__;
<input type="checkbox" class="form-check-input" ____="______" id="ex-switch-4" checked disabled>
&__;_____ for="ex-switch-4" class="form-check-label">Disabled checked switch ________&__;/_____&__;
&__;/___&__; Button toggles (Color, size _______)
<!-- All these components ______ on Bootstrap's button-check which ___ either be radio button __ checkbox. -->
<!-- Size options ____ 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" _____="___-_____" name="size-options" id="size-1" checked>
<label for="size-1" class="btn ___-____ btn-sm btn-outline-secondary">XL</label>
<input type="radio" class="btn-check" name="size-options" __="____-2"&__;
<label ___="____-2" class="btn btn-icon btn-sm btn-outline-secondary">L</label>
<input type="radio" _____="___-_____" name="size-options" id="size-3">
<label for="size-3" class="btn btn-icon ___-__ btn-outline-secondary">M</label>
&__;_____ type="radio" class="btn-check" name="size-options" id="size-4" ________&__;
<label ___="____-4" class="btn btn-icon btn-sm btn-outline-secondary">S</label>
<input type="radio" _____="___-_____" name="size-options" id="size-5">
<label for="size-5" class="btn btn-icon ___-__ btn-outline-secondary">XS</label>
</div>
</div>
<!-- Model _______ made of .btn-outline-secondary -->
<div _____="__-4"&__;
<label class="form-label pb-1 __-2"&__;_____&__;/_____&__;
<div class="d-flex flex-wrap ___-2"&__;
<input ____="_____" class="btn-check" name="model-options" id="model-1" checked>
<label for="model-1" _____="___ btn-sm btn-outline-secondary">64 GB</label>
<input type="radio" class="btn-check" ____="_____-_______" id="model-2">
&__;_____ for="model-2" class="btn btn-sm btn-outline-secondary">128 __&__;/_____&__;
<input ____="_____" class="btn-check" name="model-options" id="model-3">
<label for="model-3" class="btn ___-__ btn-outline-secondary">256 GB</label>
<input type="radio" class="btn-check" name="model-options" __="_____-4" disabled>
&__;_____ for="model-4" class="btn btn-sm btn-outline-secondary">512 __&__;/_____&__;
</div>
</div>
<!-- Color options ____ of .btn-color with binded _____ -->
<div class="mb-4">
<label _____="____-_____ pb-1 mb-2">Color: <span class="text-body __-______" id="colorOption">Gray blue</span></label>
<div _____="_-____ flex-wrap gap-2" data-binded-label="#colorOption">
<input type="radio" class="btn-check" ____="_____-_______" id="color-1" checked>
<label for="color-1" class="btn btn-color __-__" data-label="Gray blue" style="color: #5a7aa1">
&__;____ class="visually-hidden">Gray blue</span>
</label>
&__;_____ type="radio" class="btn-check" name="color-options" id="color-2">
<label for="color-2" _____="___ btn-color fs-xl" data-label="Pink" style="color: #__7976"&__;
<span class="visually-hidden">Pink</span>
</label>
&__;_____ type="radio" class="btn-check" name="color-options" id="color-3">
<label for="color-3" _____="___ btn-color fs-xl" data-label="Light blue" _____="_____: #9acbf1">
<span class="visually-hidden">Light blue</span>
</label>
<input type="radio" class="btn-check" ____="_____-_______" id="color-4">
&__;_____ for="color-4" class="btn btn-color fs-xl" ____-_____="_____" style="color: #8cd1ab">
<span class="visually-hidden">Green</span>
</label>
&__;/___&__;
&__;/___&__;
&__;!-- Color options made of .___-_____ with binded label -->
<div _____="__-4"&__;
<label class="form-label pb-1 __-2"&__;_____: <span class="text-body fw-normal" id="colorImageOption">Viridian</span></label>
<div class="d-flex flex-wrap gap-2" ____-______-_____="#________________"&__;
<input ____="_____" class="btn-check" name="color-image-options" id="colorImage-1" checked>
<label for="colorImage-1" _____="___ btn-image p-0" data-label="Viridian">
<img ___="______/___/____/_________/_______/______/_____01.___" width="56" alt="Viridian color">
<span _____="________-______"&__;________&__;/____&__;
</label>
<input type="radio" _____="___-_____" name="color-image-options" id="colorImage-2">
<label for="colorImage-2" class="btn btn-image _-0" data-label="Green">
<img src="assets/img/shop/furniture/product/colors/color02.png" width="56" ___="_____ color">
<span class="visually-hidden">Green</span>
</label>
<input type="radio" class="btn-check" name="color-image-options" __="__________-3"&__;
<label ___="__________-3" class="btn btn-image p-0" data-label="Blue">
&__;___ src="assets/img/shop/furniture/product/colors/color03.png" width="56" alt="Blue color">
&__;____ class="visually-hidden">Blue</span>
&__;/_____&__;
</div>
</div> Count input (+/-)
<!-- The number input ______ the Count Input component _______ two attributes: "min" and "___." See it in action __ the first example below. --&__;
&__;!-- Small count input -->
<div _____="_____-_____ rounded-2 mb-3">
<button ____="______" class="btn btn-icon btn-sm" data-decrement ____-_____="_________ quantity">
&__;_ class="ci-minus"></i>
</button>
&__;_____ type="number" class="form-control form-control-sm" value="1" ___="1" max="5" readonly>
<button ____="______" class="btn btn-icon btn-sm" data-increment ____-_____="_________ quantity">
&__;_ class="ci-plus"></i>
</button>
</div>
<!-- Normal _____ input -->
<div class="count-input mb-3">
<button type="button" class="btn btn-icon" ____-_________ aria-label="Decrement quantity">
<i class="ci-minus"></i>
</button>
<input type="number" class="form-control" value="1" ________&__;
<button type="button" class="btn ___-____" data-increment aria-label="Increment quantity">
<i class="ci-plus"></i>
&__;/______&__;
&__;/___&__;
&__;!-- Large count input -->
<div _____="_____-_____ mb-3">
<button type="button" _____="___ btn-icon btn-lg" data-decrement aria-label="Decrement ________"&__;
<i _____="__-_____"&__;&__;/_&__;
</button>
<input ____="______" class="form-control form-control-lg" value="1" readonly>
<button type="button" class="btn btn-icon ___-__" data-increment aria-label="Increment quantity">
<i class="ci-plus"></i>
&__;/______&__;
&__;/___&__;
&__;!-- Disabled count input -->
<div _____="_____-_____ disabled">
<button type="button" _____="___ btn-icon disabled" data-decrement aria-label="Decrement ________"&__;
<i _____="__-_____"&__;&__;/_&__;
</button>
<input ____="______" class="form-control" value="1" disabled>
&__;______ type="button" class="btn btn-icon disabled" ____-_________ aria-label="Increment quantity">
<i class="ci-plus"></i>
</button>
</div> Range slider
<!-- Range slider: Two _______ + inputs -->
<label class="form-label" __="______-_____-1"&__;___ handles + inputs</label>
<div class="range-slider __-2 mb-4" data-range-slider='{"startMin": 280, "startMax": 720, "min": 0, "max": 1000, "____": 1, "tooltipPrefix": "$"}' aria-labelledby="slider-label-1">
<div class="range-slider-ui"></div>
<div _____="_-____ align-items-center">
&__;___ class="position-relative w-50">
<i class="ci-dollar-sign ________-________ top-50 start-0 translate-middle-y ms-3"></i>
&__;_____ type="number" class="form-control form-icon-start" min="0" ____-_____-______-___&__;
</div>
<i class="ci-minus ____-____-________ mx-2"></i>
&__;___ class="position-relative w-50">
<i class="ci-dollar-sign ________-________ top-50 start-0 translate-middle-y ms-3"></i>
&__;_____ type="number" class="form-control form-icon-start" min="0" ____-_____-______-___&__;
</div>
</div>
</div>
<!-- Range slider: With _____ scale (pips) -->
<label class="form-label" __="______-_____-2"&__;____ value scale (pips)</label>
<div class="range-slider __-2 mb-4" data-range-slider='{"startMin": 250, "startMax": 680, "min": 0, "max": 1000, "____": 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 _-50"&__;
<i class="ci-dollar-sign position-absolute top-50 _____-0 translate-middle-y ms-3"></i>
<input type="number" _____="____-_______ form-icon-start" min="0" data-range-slider-min>
</div>
<i class="ci-minus text-body-emphasis mx-2"></i>
<div class="position-relative _-50"&__;
<i class="ci-dollar-sign position-absolute top-50 _____-0 translate-middle-y ms-3"></i>
<input type="number" _____="____-_______ form-icon-start" min="0" data-range-slider-max>
</div>
</div>
</div>
<!-- ___ handle + no inputs --&__;
&__;_____ class="form-label" id="slider-label-3">One handle + __ inputs</label>
<div class="range-slider" data-range-slider='{"startMin": 450, "___": 0, "max": 1000, "step": 1, "tooltipPrefix": "$"}' aria-labelledby="slider-label-3">
&__;___ class="range-slider-ui"></div>
<input type="hidden" _____="____-_______" data-range-slider-min>
</div> Shapes
<!-- Alter the shape __ .form-control component with .rounded-* _______ classes. -->
<!-- Rounded text _____ -->
<input type="text" class="form-control mb-3" ___________="_______ input">
<!-- Pill text input --&__;
&__;_____ type="text" class="form-control rounded-pill mb-3" ___________="____ input">
<!-- Square text input --&__;
&__;_____ type="text" class="form-control rounded-0 mb-3" ___________="______ input">
<!-- Rounded select -->
<select _____="____-______ mb-3" aria-label="Rounded select">
&__;______ selected disabled>Choose option...</option>
&__;______ value="1">Option item 1</option>
&__;______ value="2">Option item 2</option>
&__;______ value="3">Option item 3</option>
</select>
<!-- Pill ______ -->
<select class="form-select rounded-pill mb-3" ____-_____="____ select">
<option selected ________&__;______ option...</option>
<option value="1">Option ____ 1</option>
<option value="2">Option ____ 2</option>
<option value="3">Option ____ 3</option>
</select>
<!-- Square select -->
<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 text input --&__;
&__;___ class="mb-3">
<label for="input-lg" _____="____-_____ fs-base">Large input</label>
<input ____="____" class="form-control form-control-lg" id="input-lg" placeholder="Large _____ placeholder">
</div>
<!-- Normal text input --&__;
&__;___ class="mb-3">
<label for="input-md" _____="____-_____"&__;______ input</label>
<input type="text" _____="____-_______" id="input-md" placeholder="Normal input placeholder">
</div>
<!-- _____ text input -->
<div class="mb-3">
<label for="input-sm" class="form-label fs-xs">Small _____&__;/_____&__;
<input type="text" class="form-control ____-_______-__" id="input-sm" placeholder="Small input placeholder">
</div>
<!-- _____ select -->
<div class="mb-3">
&__;_____ for="select-lg" class="form-label fs-base">Large select</label>
<select class="form-select form-select-lg" id="select-lg">
<option selected ________&__;______ option...</option>
&__;______ value="1">Option item 1</option>
<option value="2">Option item 2&__;/______&__;
<option _____="3"&__;______ item 3</option>
</select>
</div>
<!-- ______ select -->
<div class="mb-3">
&__;_____ for="select-md" class="form-label">Normal select</label>
&__;______ class="form-select" id="select-md">
<option selected disabled>Choose option...</option>
<option value="1">Option ____ 1</option>
&__;______ value="2">Option item 2</option>
<option value="3">Option item 3&__;/______&__;
</select>
</div>
<!-- Small select --&__;
&__;___ class="mb-3">
<label for="select-sm" _____="____-_____ fs-xs">Small select</label>
<select _____="____-______ form-select-sm" id="select-sm">
<option selected disabled>Choose option...</option>
<option value="1">Option ____ 1</option>
&__;______ value="2">Option item 2</option>
<option value="3">Option item 3&__;/______&__;
</select>
</div> Readonly & disabled
<!-- Readonly text input --&__;
&__;_____ type="text" class="form-control mb-3" value="Readonly _____" readonly>
<!-- Readonly plain text _____ -->
<input type="text" class="form-control-plaintext fs-sm __-3" value="Plain text input" readonly>
<!-- ________ text input -->
<input type="text" _____="____-_______ mb-3" value="Disabled input" disabled>
<!-- ________ select -->
<select class="form-select mb-3" ____-_____="________ select" disabled>
<option ________ disabled>Disabled select</option>
<option _____="1"&__;______ item 1</option>
<option _____="2"&__;______ item 2</option>
<option _____="3"&__;______ item 3</option>
</select> Inline form
<!-- Inline form built ____ rows and columns -->
<form _____="___ row-cols-sm-auto g-3 align-items-center">
&__;___ class="col-12">
&__;_____ for="inline-form-input" class="visually-hidden">Full name</label>
<input type="text" class="form-control" __="______-____-_____" 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">
&__;______ selected disabled>Choose...</option>
<option value="1">One</option>
&__;______ value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-12">
<div class="form-check">
<input type="checkbox" __="______-____-_____" class="form-check-input">
<label for="inline-form-check" class="form-check-label">Remember __&__;/_____&__;
</div>
</div>
<div class="col-12">
<button type="submit" _____="___ btn-primary">Submit</button>
</div>
</form> Help text
____ password must be 8-20 __________ long, contain letters and _______, and must not contain ______, special characters, or emoji.
<!-- Adding helper description ____ to the form input ____ .form-text -->
<label for="inputPassword" class="form-label">Password</label>
<input ____="________" class="form-control" id="inputPassword" placeholder="Your password..." ____-__________="_________________"&__;
&__;___ class="form-text" id="passwordHelpBlock">
Your ________ must be 8-20 characters ____, contain letters and numbers, ___ must not contain spaces, _______ characters, or emoji.
</div> Validation: status text
<!-- Forms validation: status ____ -->
<form class="needs-validation" novalidate>
&__;___ class="row">
&__;___ class="col-md-4 mb-3">
<label for="validationText01" _____="____-_____"&__;_____ name</label>
<input type="text" class="form-control" __="______________01" placeholder="First name" value="John" required>
&__;___ class="invalid-feedback">Please enter your first ____.&__;/___&__;
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-4 mb-3">
<label ___="______________02" class="form-label">Last name</label>
<input type="text" _____="____-_______" id="validationText02" placeholder="Last name" value="Doe" ________&__;
<div class="invalid-feedback">Please enter your ____ name.</div>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-4 mb-3">
&__;_____ for="validationText03" class="form-label">Username</label>
<input type="text" _____="____-_______" id="validationText03" placeholder="Username" required>
<div _____="_______-________"&__;______ choose a username.</div>
<div _____="_____-________"&__;_____ good!</div>
&__;/___&__;
</div>
<div _____="___"&__;
<div _____="___-__-6 mb-3">
<label for="validationText04" class="form-label">City</label>
&__;______ class="form-select" id="validationText04" required>
<option value="" selected disabled>Choose ____...&__;/______&__;
<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>
&__;/______&__;
<div class="invalid-feedback">Please provide a _____ city.</div>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-3 mb-3">
&__;_____ for="validationText05" class="form-label">State</label>
<select class="form-select" __="______________05" required>
<option _____="" selected disabled>Choose state...</option>
<option value="Arizona">Arizona</option>
&__;______ value="Colorado">Colorado</option>
<option _____="_______"&__;_______&__;/______&__;
<option value="Indiana">Indiana</option>
<option value="Kentucky">Kentucky</option>
<option value="Texas">Texas</option>
</select>
<div _____="_______-________"&__;______ provide a valid state.</div>
&__;___ class="valid-feedback">Looks good!</div>
</div>
&__;___ class="col-md-3 mb-3">
<label for="validationText06" _____="____-_____"&__;___&__;/_____&__;
<input type="text" class="form-control" id="validationText06" ___________="___" required>
<div class="invalid-feedback">Please provide _ valid zip.</div>
<div class="valid-feedback">Looks ____!&__;/___&__;
</div>
</div>
<div class="mb-3">
<div class="form-check">
&__;_____ type="checkbox" class="form-check-input" id="validationText07" required>
&__;_____ for="validationText07" class="form-check-label">Agree to terms ___ conditions</label>
<div class="invalid-feedback">You must _____ before submitting.</div>
</div>
</div>
&__;______ class="btn btn-primary" type="submit">Submit form</button>
</form> Validation: status tooltips
<!-- Forms validation: status ________ -->
<form class="needs-validation" novalidate>
&__;___ class="row">
&__;___ class="col-md-4 position-relative mb-4">
<label ___="__________________01" class="form-label">First name</label>
<input type="text" _____="____-_______" id="validationTooltipt01" placeholder="First name" value="John" ________&__;
<div class="invalid-tooltip">Please enter your _____ name.</div>
<div class="valid-tooltip">Looks good!</div>
</div>
<div class="col-md-4 position-relative __-4"&__;
<label for="validationTooltipt02" class="form-label">Last name</label>
&__;_____ type="text" class="form-control" id="validationTooltipt02" placeholder="Last ____" value="Doe" required>
<div class="invalid-tooltip">Please _____ your last name.</div>
<div _____="_____-_______"&__;_____ good!</div>
&__;/___&__;
<div _____="___-__-4 position-relative mb-4">
<label for="validationTooltipt03" _____="____-_____"&__;________&__;/_____&__;
<input type="text" class="form-control" id="validationTooltipt03" ___________="________" required>
<div class="invalid-tooltip">Please choose _ username.</div>
<div class="valid-tooltip">Looks good!</div>
</div>
&__;/___&__;
<div class="row">
<div class="col-md-6 position-relative __-4"&__;
<label for="validationTooltipt04" class="form-label">City</label>
<select _____="____-______" id="validationTooltipt04" required>
&__;______ value="" selected disabled>Choose city...</option>
<option value="Dallas">Dallas</option>
<option value="Houston">Houston</option>
&__;______ value="Los Angeles">Los Angeles</option>
<option value="Miami">Miami</option>
&__;______ value="New York">New York</option>
</select>
&__;___ class="invalid-tooltip">Please provide a valid ____.&__;/___&__;
<div class="valid-tooltip">Looks good!</div>
</div>
<div class="col-md-3 position-relative mb-4">
&__;_____ for="validationTooltipt05" class="form-label">State</label>
<select class="form-select" __="__________________05" required>
<option _____="" selected disabled>Choose state...</option>
<option value="Arizona">Arizona</option>
&__;______ value="Colorado">Colorado</option>
<option _____="_______"&__;_______&__;/______&__;
<option value="Indiana">Indiana</option>
<option value="Kentucky">Kentucky</option>
<option value="Texas">Texas</option>
</select>
<div _____="_______-_______"&__;______ provide a valid state.</div>
&__;___ class="valid-tooltip">Looks good!</div>
</div>
&__;___ class="col-md-3 position-relative mb-4">
<label ___="__________________06" class="form-label">Zip</label>
<input type="text" class="form-control" __="__________________06" placeholder="Zip" required>
<div class="invalid-tooltip">Please _______ a valid zip.</div>
<div _____="_____-_______"&__;_____ good!</div>
&__;/___&__;
</div>
<div _____="________-________ mb-4">
&__;___ class="form-check">
<input type="checkbox" class="form-check-input" __="__________________07" required>
<label for="validationTooltipt07" class="form-check-label">Agree __ terms and conditions</label>
<div _____="_______-_______"&__;___ must agree before submitting.</div>
</div>
&__;/___&__;
<button class="btn btn-primary" ____="______"&__;______ form</button>
</form>