Buy now
Forms
Form control styles, layout options, and custom components.
Supported input types
<!-- Text input -->
<div class="mb-3">
<label for="text-input" class="form-label">Text</label>
<input class="form-control" type="text" id="text-input" value="Artisanal kale">
</div>
<!-- Search input -->
<div class="mb-3">
<label for="search-input" class="form-label">Search</label>
<input class="form-control" type="search" 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 class="form-control" type="email" id="email-input" value="email@example.com">
</div>
<!-- URL Input -->
<div class="mb-3">
<label for="url-input" class="form-label">URL</label>
<input class="form-control" type="url" id="url-input" value="https://getbootstrap.com">
</div>
<!-- Phone Input -->
<div class="mb-3">
<label for="tel-input" class="form-label">Phone</label>
<input class="form-control" type="tel" 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 class="form-control" type="password" 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">
<option>Choose option...</option>
<option>Option item 1</option>
<option>Option item 2</option>
<option>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>
<option>Option item 1</option>
<option>Option item 2</option>
<option>Option item 3</option>
<option>Option item 4</option>
<option>Option item 5</option>
<option>Option item 6</option>
</select>
</div>
<!-- File input -->
<div class="mb-3">
<label for="file-input" class="form-label">File</label>
<input class="form-control" type="file" id="file-input">
</div>
<!-- Number input -->
<div class="mb-3">
<label for="number-input" class="form-label">Number</label>
<input class="form-control" type="number" id="number-input" value="37">
</div>
<!-- Datalist -->
<div class="mb-3">
<label for="datalist-input" class="form-label">Datalist</label>
<input 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 class="form-control" type="range" id="range-input">
</div>
<!-- Color input -->
<div class="mb-3">
<label for="color-input" class="form-label">Color</label>
<input class="form-control form-control-color" type="color" id="color-input" value="#35cfe3">
</div>// Text input
.mb-3
label(for="text-input").form-label
| Text
input(type="text", id="text-input", value="Artisanal kale").form-control
// Search input
.mb-3
label(for="search-input").form-label
| Search
input(type="search", id="search-input", value="How do I shoot web").form-control
// Email input
.mb-3
label(for="email-input").form-label
| Email
input(type="email", id="email-input", value="email@example.com").form-control
// URL input
.mb-3
label(for="url-input").form-label
| URL
input(type="url", id="url-input", value="https://getbootstrap.com").form-control
// Phone input
.mb-3
label(for="tel-input").form-label
| Phone
input(type="tel", id="tel-input", value="1-(770)-334-2518").form-control
// Password input
.mb-3
label(for="pass-input").form-label
| Password
input(type="password", id="pass-input", value="mypasswordexample").form-control
// Textarea
.mb-3
label(for="textarea-input").form-label
| Textarea
textarea(id="textarea-input", rows="5").form-control Hello World!
// Select
.mb-3
label(for="select-input").form-label
| Select
select(id="select-input").form-select
option Choose option...
option Option item 1
option Option item 2
option Option item 3
// Multiselect
.mb-3
label(for="multiselect-input").form-label
| Multiselect
select(id="multiselect-input", size="3", multiple).form-select
option Option item 1
option Option item 2
option Option item 3
option Option item 4
option Option item 5
option Option item 6
// File input
.mb-3
label(for="file-input").form-label
| File
input(type="file", id="file-input").form-control
// Number input
.mb-3
label(for="number-input").form-label
| Number
input(type="number", id="number-input", value="37").form-control
// Datalist
.mb-3
label(for="datalist-input").form-label
| Datalist
input(list="datalist-options", id="datalist-input", placeholder="Type to search...").form-control
datalist#datalist-options
option(value="San Francisco")
option(value="New York")
option(value="Seattle")
option(value="Los Angeles")
option(value="Chicago")
// Range input
.mb-3
label(for="range-input").form-label
| Range
input(type="range", id="range-input").form-range
// Color input
.mb-3
label(for="color-input").form-label
| Color
input(type="color", id="color-input", value="#35cfe3").form-control.form-control-color
Floating labels
<!-- 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">
<option selected>Argentina</option>
<option>Belgium</option>
<option>France</option>
<option>Germany</option>
<option>Japan</option>
<option>Spain</option>
<option>USA</option>
</select>
<label for="fl-select">Your country</label>
</div>
<!-- Floating label: Textarea -->
<div class="form-floating">
<textarea class="form-control" id="fl-textarea" style="height: 120px;" placeholder="Your message"></textarea>
<label for="fl-textarea">Your message</label>
</div>// Floating label: Text input
.form-floating.mb-3
input(type="text", id="fl-text", placeholder="Your name").form-control
label(for="fl-text") Your name
// Floating label: Select
.form-floating.mb-3
select(id="fl-select").form-select
option(selected) Argentina
option Belgium
option France
option Germany
option Japan
option Spain
option USA
label(for="fl-select") Your country
// Floating label: Textarea
.form-floating.mb-3
textarea(id="fl-textarea", style="height: 120px;", placeholder="Your message").form-control
label(for="fl-textarea") Your message
Password visibility toggle
<!-- Password visibility toggle -->
<div class="mb-3">
<label class="form-label" for="pass-visibility">Password</label>
<div class="password-toggle">
<input class="form-control" type="password" id="pass-visibility" value="hidden@password">
<label class="password-toggle-btn" aria-label="Show/hide password">
<input class="password-toggle-check" type="checkbox">
<span class="password-toggle-indicator"></span>
</label>
</div>
</div>// Password visibility toggle
.mb-3
label(for="pass-visibility").form-label
| Password
.password-toggle
input(type="password", id="pass-visibility", value="hidden@password").form-control
label(aria-label="Show/hide password").password-toggle-btn
input(type="checkbox").password-toggle-check
span.password-toggle-indicator
Checkboxes
<!-- Stacked checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="ex-check-1">
<label class="form-check-label" for="ex-check-1">Check this checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="ex-check-2" checked>
<label class="form-check-label" for="ex-check-2">Uncheck this checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="ex-check-3" disabled>
<label class="form-check-label" for="ex-check-3">Disabled checkbox</label>
</div>
<!-- Inline checkboxes -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="ex-check-4">
<label class="form-check-label" for="ex-check-4">Check this checkbox</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="ex-check-5" checked>
<label class="form-check-label" for="ex-check-5">Uncheck this checkbox</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="ex-check-6" disabled>
<label class="form-check-label" for="ex-check-6">Disabled checkbox</label>
</div>// Stacked checkboxes
.form-check
input(type="checkbox", id="ex-check-1").form-check-input
label.form-check-label(for="ex-check-1") Check this checkbox
.form-check
input(type="checkbox", id="ex-check-2", checked).form-check-input
label.form-check-label(for="ex-check-2") Uncheck this checkbox
.form-check
input(type="checkbox", id="ex-check-3", disabled).form-check-input
label.form-check-label(for="ex-check-3") Disabled checkbox
// Inline checkboxes
.form-check.form-check-inline
input(type="checkbox", id="ex-check-4").form-check-input
label.form-check-label(for="ex-check-4") Check this checkbox
.form-check.form-check-inline
input(type="checkbox" id="ex-check-5", checked).form-check-input
label.form-check-label(for="ex-check-5") Uncheck this checkbox
.form-check.form-check-inline
input(type="checkbox", id="ex-check-6", disabled).form-check-input
label.form-check-label(for="ex-check-6") Disabled checkbox
Radio buttons
<!-- Stacked radio buttons -->
<div class="form-check">
<input class="form-check-input" type="radio" id="ex-radio-1" name="radio">
<label class="form-check-label" for="ex-radio-1">Toggle this radio</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="ex-radio-2" name="radio" checked>
<label class="form-check-label" for="ex-radio-2">Toggle this radio</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="ex-radio-3" name="radio" disabled>
<label class="form-check-label" for="ex-radio-3">Disabled radio</label>
</div>
<!-- Inline radio buttons -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="ex-radio-4" name="radio2">
<label class="form-check-label" for="ex-radio-4">Toggle this radio</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="ex-radio-5" name="radio2" checked>
<label class="form-check-label" for="ex-radio-5">Toggle this radio</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="ex-radio-6" name="radio2" disabled>
<label class="form-check-label" for="ex-radio-6">Disabled radio</label>
</div>// Stacked radio buttons
.form-check
input(type="radio", id="ex-radio-1", name="radio").form-check-input
label.form-check-label(for="ex-radio-1") Toggle this radio
.form-check
input(type="radio", id="ex-radio-2", name="radio", checked).form-check-input
label.form-check-label(for="ex-radio-2") Toggle this radio
.form-check
input(type="radio", id="ex-radio-3", name="radio", disabled).form-check-input
label.form-check-label(for="ex-radio-3") Disabled radio
// Inline radio buttons
.form-check.form-check-inline
input(type="radio", id="ex-radio-4", name="radio2").form-check-input
label.form-check-label(for="ex-radio-4") Toggle this radio
.form-check.form-check-inline
input(type="radio", id="ex-radio-5", name="radio2", checked).form-check-input
label.form-check-label(for="ex-radio-5") Toggle this radio
.form-check.form-check-inline
input(type="radio", id="ex-radio-6", name="radio2", disabled).form-check-input
label.form-check-label(for="ex-radio-6") Disabled radio
Switches
<!-- Switch -->
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="customSwitch1">
<label class="form-check-label" for="customSwitch1">Toggle this switch element</label>
</div>
<!-- Checked switch -->
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="customSwitch2" checked>
<label class="form-check-label" for="customSwitch2">Toggle this switch element</label>
</div>
<!-- Disabled switch -->
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="customSwitch3" disabled>
<label class="form-check-label" for="customSwitch3">Disabled switch element</label>
</div>// Switch
.form-check.form-switch
input(type="checkbox", id="customSwitch1").form-check-input
label.form-check-label(for="customSwitch1") Toggle this switch element
// Checked switch
.form-check.form-switch
input(type="checkbox", id="customSwitch1", checked).form-check-input
label.form-check-label(for="customSwitch2") Toggle this switch element
// Disabled switch
.form-check.form-switch
input(type="checkbox", id="customSwitch1", disabled).form-check-input
label.form-check-label(for="customSwitch3") Disabled switch element
Drag & drop file upload
<!-- Drag and drop file upload -->
<div class="file-drop-area">
<div class="file-drop-icon ai-upload"></div>
<span class="file-drop-message">Drag and drop here to upload</span>
<input type="file" class="file-drop-input">
<button type="button" class="file-drop-btn btn btn-translucent-primary btn-sm">Or select file</button>
</div>// Drag and drop file upload
.file-drop-area
.file-drop-icon.ai-upload
span.file-drop-message Drag and drop here to upload
input(type="file").file-drop-input
button(type="button").file-drop-btn.btn.btn-translucent-primary.btn-sm
| Or select file
Size / color options
Choose size
Choose color - Blue
<!-- Size options (radio buttons) -->
<div class="form-check form-option form-option-size form-check-inline mb-2">
<input type="radio" class="form-check-input" id="xl" name="size" checked>
<label for="xl" class="form-option-label">XL</label>
</div>
<div class="form-check form-option form-option-size form-check-inline mb-2">
<input type="radio" class="form-check-input" id="l" name="size" checked>
<label for="l" class="form-option-label">L</label>
</div>
<div class="form-check form-option form-option-size form-check-inline mb-2">
<input type="radio" class="form-check-input" id="m" name="size" checked>
<label for="m" class="form-option-label">M</label>
</div>
<div class="form-check form-option form-option-size form-check-inline mb-2">
<input type="radio" class="form-check-input" id="s" name="size" checked>
<label for="s" class="form-option-label">S</label>
</div>
<div class="form-check form-option form-option-size form-check-inline mb-2">
<input type="radio" class="form-check-input" id="xs" name="size" checked>
<label for="xs" class="form-option-label">XS</label>
</div>
<!-- Color options (radio buttons) -->
<div class="fs-sm mb-2">
<span class="fw-medium text-heading">Choose color - </span>
<span class="ms-1" id="colorOptionText">Blue</span>
</div>
<div class="form-check form-option form-option-color form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color" id="blue" value="Blue" data-label="colorOptionText" checked>
<label class="form-option-label rounded-circle" for="blue">
<span class="form-option-color rounded-circle" style="background-color: #6a9bf4;"></span>
</label>
</div>
<div class="form-check form-option form-option-color form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color" id="yellow" value="Yellow" data-label="colorOptionText">
<label class="form-option-label rounded-circle" for="yellow">
<span class="form-option-color rounded-circle" style="background-color: #ff9d50;"></span>
</label>
</div>
<div class="form-check form-option form-option-color form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color" id="green" value="Green" data-label="colorOptionText">
<label class="form-option-label rounded-circle" for="green">
<span class="form-option-color rounded-circle" style="background-color: #16c995;"></span>
</label>
</div>
<div class="form-check form-option form-option-color form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color" id="pink" value="Pink" data-label="colorOptionText">
<label class="form-option-label rounded-circle" for="pink">
<span class="form-option-color rounded-circle" style="background-color: #f74f78;"></span>
</label>
</div>// Size options (radio buttons)
.form-check.form-option.form-option-size.form-check-inline.mb-2
input(type="radio", name="size", id="xl" checked).form-check-input
label.form-option-label(for="xl") XL
.form-check.form-option.form-option-size.form-check-inline.mb-2
input(type="radio", name="size", id="l").form-check-input
label.form-option-label(for="l") L
.form-check.form-option.form-option-size.form-check-inline.mb-2
input(type="radio", name="size", id="m").form-check-input
label.form-option-label(for="m") M
.form-check.form-option.form-option-size.form-check-inline.mb-2
input(type="radio", name="size", id="s").form-check-input
label.form-option-label(for="s") S
.form-check.form-option.form-option-size.form-check-inline.mb-2
input(type="radio", name="size", id="xs").form-check-input
label.form-option-label(for="xs") XS
// Color options (radio buttons)
.fs-sm.mb-2
span.fw-medium.text-heading
| Choose color -
span#colorOptionText.ms-1
| Blue
.form-check.form-option.form-option-color.form-check-inline.mb-2
input(type="radio", name="color", id="blue", value="Blue", data-label="colorOptionText", checked).form-check-input
label(for="blue").form-option-label.rounded-circle
span(style="background-color: #6a9bf4;").form-option-color.rounded-circle
.form-check.form-option.form-option-color.form-check-inline.mb-2
input(type="radio", name="color", id="yellow", value="Yellow", data-label="colorOptionText").form-check-input
label(for="yellow").form-option-label.rounded-circle
span(style="background-color: #ff9d50;").form-option-color.rounded-circle
.form-check.form-option.form-option-color.form-check-inline.mb-2
input(type="radio", name="color", id="green", value="Green", data-label="colorOptionText").form-check-input
label(for="green").form-option-label.rounded-circle
span(style="background-color: #16c995;").form-option-color.rounded-circle
.form-check.form-option.form-option-color.form-check-inline.mb-2
input(type="radio", name="color", id="pink", value="Pink", data-label="colorOptionText").form-check-input
label(for="pink").form-option-label.rounded-circle
span(style="background-color: #f74f78;").form-option-color.rounded-circle
Sizing
<!-- Large input -->
<div class="mb-3">
<label for="large-input" class="form-label">Large input</label>
<input class="form-control form-control-lg" type="text" id="large-input" placeholder="Large input placeholder">
</div>
<!-- Normal input -->
<div class="mb-3">
<label for="normal-input" class="form-label">Normal input</label>
<input class="form-control" type="text" id="normal-input" placeholder="Normal input placeholder">
</div>
<!-- Small input -->
<div class="mb-3">
<label for="small-input" class="form-label">Small input</label>
<input class="form-control form-control-sm" type="text" id="small-input" placeholder="Small input placeholder">
</div>// Large input
.mb-3
label(for="large-input").form-label
| Large input
input(type="text", id="large-input", placeholder="Large input placeholder").form-control.form-control-lg
//- Normal input
.mb-3
label(for="normal-input").form-label
| Normal input
input(type="text", id="normal-input", placeholder="Normal input placeholder").form-control
// Small input
.mb-3
label(for="small-input").form-label
| Small input
input(type="text", id="small-input", placeholder="Small input placeholder").form-control.form-control-sm
Readonly & disabled
<!-- Readonly input -->
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
<!-- Disabled input -->
<input class="form-control" type="text" placeholder="Disabled input here..." disabled>
<!-- Disabled select -->
<select class="form-select" disabled>
<option>Disabled select here...</option>
<option>Option item 1</option>
<option>Option item 2</option>
<option>Option item 3</option>
</select>// Readonly input
input(type="text", placeholder="Readonly input here...", readonly).form-control
// Disabled input
input(type="text", placeholder="Disabled input here...", disabled).form-control
// Disabled select
select(disabled).form-select
option Disabled select here...
option Option item 1
option Option item 2
option Option item 3
Help text
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
<!-- Form help text -->
<div class="mb-3">
<label for="help-text-input" class="form-label">Password</label>
<input class="form-control" type="password" id="help-text-input" placeholder="Your password here">
<div class="form-text">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</div>
</div>// Form help text
.mb-3
label(for="help-text-input").form-label
| Password
input(type="password", id="help-text-input", placeholder="Your password here").form-control
.form-text
| Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
Validation: status text
<!-- Forms validation: status text -->
<form class="needs-validation" novalidate>
<div class="row">
<div class="col-md-4 mb-3">
<label for="validationCustom01" class="form-label">First name</label>
<input class="form-control" type="text" id="validationCustom01" placeholder="First name" value="John" required>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02" class="form-label">Last name</label>
<input class="form-control" type="text" id="validationCustom02" placeholder="Last name" value="Doe" required>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername" class="form-label">Username</label>
<input class="form-control" type="text" id="validationCustomUsername" 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="validationCustom03" class="form-label">City</label>
<select class="form-select" id="validationCustom03" required>
<option value="">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="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required>
<option value="">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="validationCustom05" class="form-label">Zip</label>
<input class="form-control" type="text" id="validationCustom05" 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 class="form-check-input" type="checkbox" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">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>// Forms validation: status text
form(novalidate).needs-validation
.row
.col-md-4.mb-3
label(for="validationCustom01").form-label
| First name
input(type="text", id="validationCustom01", placeholder="First name", value="John", required).form-control
.valid-feedback
| Looks good!
.col-md-4.mb-3
label(for="validationCustom02").form-label
| Last name
input(type="text", id="validationCustom02", placeholder="Last name", value="Doe", required).form-control
.valid-feedback
| Looks good!
.col-md-4.mb-3
label(for="validationCustomUsername").form-label
| Username
input(type="text", id="validationCustomUsername", placeholder="Username", required).form-control
.invalid-feedback
| Please choose a username.
.valid-feedback
| Looks good!
.row
.col-md-6.mb-3
label(for="validationCustom03").form-label
| City
select(id="validationCustom03", required).form-select
option(value="") Choose city...
option(value="Dallas") Dallas
option(value="Houston") Houston
option(value="Los Angeles") Los Angeles
option(value="Miami") Miami
option(value="New York") New York
.invalid-feedback
| Please provide a valid city.
.valid-feedback
| Looks good!
.col-md-3.mb-3
label(for="validationCustom04").form-label
| State
select(id="validationCustom04", required).form-select
option(value="") Choose state...
option(value="Arizona") Arizona
option(value="Colorado") Colorado
option(value="Florida") Florida
option(value="Indiana") Indiana
option(value="Kentucky") Kentucky
option(value="Texas") Texas
.invalid-feedback
| Please provide a valid state.
.valid-feedback
| Looks good!
.col-md-3.mb-3
label(for="validationCustom05").form-label
| Zip
input(type="text", id="validationCustom05", placeholder="Zip", required).form-control
.invalid-feedback
| Please provide a valid zip.
.valid-feedback
| Looks good!
.mb-3
.form-check
input(type="checkbox", id="invalidCheck", required).form-check-input
label.form-check-label(for="invalidCheck") Agree to terms and conditions
.invalid-feedback
| You must agree before submitting.
button.btn.btn-primary(type="submit") Submit Form
Validation: status tooltips
<!-- Forms validation: status tooltips -->
<form class="needs-validation" novalidate>
<div class="row">
<div class="col-md-4 mb-3">
<label for="validationTooltip01" class="form-label">First name</label>
<input class="form-control" type="text" id="validationTooltip01" placeholder="First name" value="John" required>
<div class="valid-tooltip">Looks good!</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationTooltip02" class="form-label">Last name</label>
<input class="form-control" type="text" id="validationTooltip02" placeholder="Last name" value="Doe" required>
<div class="valid-tooltip">Looks good!</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationTooltipUsername" class="form-label">Username</label>
<input class="form-control" type="text" id="validationTooltipUsername" 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 mb-3">
<label for="validationTooltip03" class="form-label">City</label>
<select class="form-select" id="validationTooltip03" required>
<option value="">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 mb-3">
<label for="validationTooltip04" class="form-label">State</label>
<select class="form-select" id="validationTooltip04" required>
<option value="">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 mb-3">
<label for="validationTooltip05" class="form-label">Zip</label>
<input class="form-control" type="text" id="validationTooltip05" placeholder="Zip" required>
<div class="invalid-tooltip">Please provide a valid zip.</div>
<div class="valid-tooltip">Looks good!</div>
</div>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="invalidCheck01" required>
<label class="form-check-label" for="invalidCheck01">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>// Forms validation: status tooltips
form(novalidate).needs-validation
.row
.col-md-4.mb-3
label(for="validationTooltip01").form-label
| First name
input(type="text", id="validationTooltip01", placeholder="First name", value="John", required).form-control
.valid-tooltip
| Looks good!
.col-md-4.mb-3
label(for="validationTooltip02").form-label
| Last name
input(type="text", id="validationTooltip02", placeholder="Last name", value="Doe", required).form-control
.valid-tooltip
| Looks good!
.col-md-4.mb-3
label(for="validationTooltipUsername").form-label
| Username
input(type="text", id="validationTooltipUsername", placeholder="Username", required).form-control
.invalid-tooltip
| Please choose a username.
.valid-tooltip
| Looks good!
.row
.col-md-6.mb-3
label(for="validationTooltip03").form-label
| City
select(id="validationTooltip03", required).form-control.custom-select
option(value="") Choose city...
option(value="Dallas") Dallas
option(value="Houston") Houston
option(value="Los Angeles") Los Angeles
option(value="Miami") Miami
option(value="New York") New York
.invalid-tooltip
| Please provide a valid city.
.valid-tooltip
| Looks good!
.col-md-3.mb-3
label(for="validationTooltip04").form-label
| State
select(id="validationTooltip04", required).form-control.custom-select
option(value="") Choose state...
option(value="Arizona") Arizona
option(value="Colorado") Colorado
option(value="Florida") Florida
option(value="Indiana") Indiana
option(value="Kentucky") Kentucky
option(value="Texas") Texas
.invalid-tooltip
| Please provide a valid state.
.valid-tooltip
| Looks good!
.col-md-3.mb-3
label(for="validationTooltip05").form-label
| Zip
input(type="text", id="validationTooltip05", placeholder="Zip", required).form-control
.invalid-tooltip
| Please provide a valid zip.
.valid-tooltip
| Looks good!
.mb-3
.form-check
input(type="checkbox", id="invalidCheck01", required).form-check-input
label(for="invalidCheck01").form-check-label Agree to terms and conditions
.invalid-tooltip
| You must agree before submitting.
button.btn.btn-primary(type="submit") Submit Form
Format input text content
<!-- Format: Credit card number -->
<div class="mb-3">
<label class="form-label" for="format-card-number">Card number</label>
<input class="form-control" type="text" id="format-card-number" data-format="card" placeholder="0000 0000 0000 0000">
</div>
<!-- Format: Credit card CVC -->
<div class="mb-3">
<label class="form-label" for="format-card-cvc">Card CVC</label>
<input class="form-control" type="text" id="format-card-cvc" data-format="cvc" placeholder="000">
</div>
<!-- Format: Date -->
<div class="mb-3">
<label class="form-label" for="format-date">Date</label>
<input class="form-control" type="text" id="format-date" data-format="date" placeholder="mm/yy">
</div>
<!-- Format: Date long -->
<div class="mb-3">
<label class="form-label" for="format-date-long">Date long</label>
<input class="form-control" type="text" id="format-date-long" data-format="date-long" placeholder="yyyy-mm-dd">
</div>
<!-- Format: Time -->
<div class="mb-3">
<label class="form-label" for="format-time">Time</label>
<input class="form-control" type="text" id="format-time" data-format="time" placeholder="hh:mm:ss">
</div>
<!-- Format: Custom -->
<div class="mb-3">
<label class="form-label" for="format-custom">Custom format</label>
<input class="form-control" type="text" id="format-custom" data-format="custom" data-delimiter="-" data-blocks="2 3 4" placeholder="00-000-0000">
</div>// Format: Credit card number
.mb-3
label.form-label(for="format-card-number") Card number
input(type="text", id="format-card-number", data-format="card", placeholder="0000 0000 0000 0000").form-control
// Format: Credit card CVC
.mb-3
label.form-label(for="format-card-cvc") Card CVC
input(type="text", id="format-card-cvc", data-format="cvc", placeholder="000").form-control
// Format: Date
.mb-3
label.form-label(for="format-date").form-label Date
input(type="text", id="format-date", data-format="date", placeholder="mm/yy").form-control
// Format: Date long
.mb-3
label.form-label(for="format-date-long") Date long
input(type="text", id="format-date-long", data-format="date-long", placeholder="yyyy-mm-dd").form-control
// Format: Time
.mb-3
label.form-label(for="format-time") Time
input(type="text", id="format-time", data-format="time", placeholder="hh:mm:ss").form-control
// Format: Custom
.mb-3
label.form-label(for="format-custom") Custom format
input(type="text", id="format-custom", data-format="custom", data-delimiter="-", data-blocks="2 3 4", placeholder="00-000-0000").form-control