Default Input
Default Input - View Code
<form>
<div class="form-group">
<input type="text" class="form-control">
</div>
</form>
To use add form-control
class to the input
Input With Helper Text
Input With Helper Text - View Code
<form>
<div class="form-group">
<input type="text" class="form-control" id="nametext" aria-describedby="name" placeholder="Name">
<small id="name" class="form-text text-muted">Helper Text</small>
</div>
</form>
Password
Password - View Code
<form>
<div class="form-group">
<input type="password" class="form-control" id="passtext" placeholder="Password">
</div>
</form>
Disabled Input
Disabled Input - View Code
<form class="mt-4">
<div class="form-group">
<input type="text" class="form-control" id="nametext1" placeholder="Name" disabled>
</div>
</form>
Add attribute disabled
to disable input field.
""
Predefined Input Value
Predefined Input Value - View Code
<form class="mt-2">
<div class="form-group">
<input type="text" class="form-control" id="prenametext" value="Name">
</div>
</form>
Add attribute value="VALUE"
to set predefined value.
Readonly Input Field
Readonly Input Field - View Code
<form class="mt-4">
<div class="form-group">
<input type="text" class="form-control" id="readonly" placeholder="Readonly Text" readonly>
</div>
</form>
Add attribute readonly
to set field readonly.
Input With Placeholder
Input With Placeholder - View Code
<form class="mt-4">
<div class="form-group">
<input type="text" class="form-control" id="placeholder" placeholder="Placeholder Text">
</div>
</form>
Add attribute
placeholder="..."
to input area.
Maximum Value
Maximum Value - View Code
<form class="mt-4">
<div class="form-group">
<input type="text" class="form-control" maxlength="6" id="maxval" aria-describedby="maxval" placeholder="Name">
</div>
</form>
Add attribute maxlength="6"
to input area.
Minimum Value
Minimum Value - View Code
<form class="mt-4">
<div class="form-group">
<input type="text" class="form-control" minlength="5" id="minval" aria-describedby="minval" placeholder="Name">
</div>
</form>
Add attribute minlength="5"
to input area.
Input Type Options
Input Type Text
Input Type Text - View Code
<form class="mt-4">
<div class="form-group">
<input type="text" class="form-control" value="Name">
</div>
</form>
Using input type="text"
Input Type Password
Input Type Password - View Code
<form class="mt-4">
<div class="form-group">
<input type="password" class="form-control" value="Name">
</div>
</form>
Using input type="password"
Input Phone Number
Input Phone Number - View Code
<form class="mt-4">
<div class="form-group">
<input type="tel" class="form-control" value="1-(444)-444-4445">
</div>
</form>
Using input type="tel"
Input Type Email
Input Type Email - View Code
<form class="mt-4">
<div class="form-group">
<input type="email" class="form-control" value="[email protected]">
</div>
</form>
Using input type="email"
Input Type URL
Input Type URL - View Code
<form class="mt-4">
<div class="form-group">
<input type="url" class="form-control" value="http://google.com">
</div>
</form>
Using input type="url"
Input Type Search
Input Type Search - View Code
<form class="mt-4">
<div class="form-group">
<input type="search" class="form-control" value="how to...">
</div>
</form>
Using input type="search"
Input Type Numbers
Input Type Numbers - View Code
<form class="mt-4">
<div class="form-group">
<input type="number" class="form-control" value="6029">
</div>
</form>
Using input type="number"
Input Type Date Time
Input Type Date Time - View Code
<form class="mt-4">
<div class="form-group">
<input type="datetime-local" class="form-control" value="2008-05-13T22:33:00">
</div>
</form>
Using
input type="datetime-local"
Input Type Date
Input Type Date - View Code
<form class="mt-4">
<div class="form-group">
<input type="date" class="form-control" value="2018-05-13">
</div>
</form>
Using input type="date"
Input Type Time
Input Type Time - View Code
<form class="mt-4">
<div class="form-group">
<input type="time" class="form-control" value="22:33:00">
</div>
</form>
Using input type="time"
Input Type Week
Input Type Week - View Code
<form class="mt-4">
<div class="form-group">
<input type="week" class="form-control" value="2011-W33">
</div>
</form>
Using input type="week"
Input Type Month
Input Type Month - View Code
<form class="mt-4">
<div class="form-group">
<input type="month" class="form-control" value="1999-08">
</div>
</form>
Using input type="month"
Input Type Color
Input Type Color - View Code
<form class="mt-4">
<div class="form-group">
<input type="color" class="form-control" value="#563d7c">
</div>
</form>
Using input type="color"
Bootstrap Colorpicker
Bootstrap Colorpicker - View Code
<form class="mt-4">
<div class="form-group">
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
</div>
</form>
Use form-control-color
classs for bootstrap colorpicker
Input Type Range
Input Type Range - View Code
<form class="mt-3">
<div class="form-group">
<input type="range" class="form-range" id="customRange1">
</div>
</form>
Using input type="range"
General Textarea
Textarea
Textarea - View Code
<form class="mt-3">
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
Textarea With Placeholder
Textarea With Placeholder - View Code
<form class="mt-3">
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Text Here..."></textarea>
</div>
</form>
Textarea With Helper Text
Textarea With Helper Text - View Code
<form>
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Text Here..."></textarea>
<small id="textHelp" class="form-text text-muted">Helper Text</small>
</div>
</form>
Inline Checkboxes & Radios
Inline Default Checkbox
Inline Default Checkbox - View Code
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
Inline Default Radio Button
Inline Default Radio Button - View Code
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
Inline Custom Checkbox
Inline Custom Checkbox - View Code
<div class="form-check-inline">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customCheck1">
<label class="custom-" for="customCheck1">1</label>
</div>
</div>
<div class="form-check-inline">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customCheck2">
<label class="custom-" for="customCheck2">2</label>
</div>
</div>
<div class="form-check-inline">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customCheck3" disabled="">
<label class="custom-" for="customCheck3">3</label>
</div>
</div>
Inline Custom Radios
Inline Custom Radios - View Code
<div class="form-check-inline">
<div class="form-check">
<input type="radio" class="form-check-input" id="customControlValidation2" name="radio-stacked">
<label class="custom-" for="customControlValidation2">1</label>
</div>
</div>
<div class="form-check-inline">
<div class="form-check">
<input type="radio" class="form-check-input" id="customControlValidation3" name="radio-stacked">
<label class="custom-" for="customControlValidation3">2</label>
</div>
</div>
<div class="form-check-inline">
<div class="form-check">
<input type="radio" class="form-check-input" id="customControlValidation4" name="radio-stacked" disabled>
<label class="custom-" for="customControlValidation4">3</label>
</div>
</div>
General Select
Select
Select - View Code
<form class="mt-4">
<div class="form-group mb-4">
<label for="exampleFormControlSelect1">Select No</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
Form Select
Form Select - View Code
<form>
<div class="form-group mb-4">
<label class="mr-sm-2" for="inlineFormCustomSelect">Select</label>
<select class="form-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</form>
To use add .form-select
class
Multiple Select
Multiple Select - View Code
<form>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
To use add multiple
to the field
Select With Addons
Select With Addons - View Code
<form>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</form>
To use add
.input-group-prepend
class to the div
Select With Buttons
Select With Buttons - View Code
<form>
<div class="input-group">
<select class="form-select" id="inputGroupSelect04">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</form>
To use add
.input-group-append
class to the div
File Upload
Default File Upload
Default File Upload - View Code
<form class="mt-3">
<input class="form-control" type="file" id="formFile">
</form>
To use add
.form-control-file
class to the input
Disabled File Upload
Disabled File Upload - View Code
<form>
<div class="mb-3">
<input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
</form>
To use add
disabled
attr to the input
Small File Upload
Small File Upload - View Code
<form class="mt-4">
<input class="form-control form-control-sm" id="formFileSm" type="file">
</form>
To use add
.form-control-sm
class to the div
Large File Upload
Large File Upload - View Code
<form class="mt-4">
<input class="form-control form-control-lg" id="formFileLg" type="file">
</form>
To use add
.form-control-lg
class to the div
Different Style in Helper Text
Left Helper Text
Left Helper Text - View Code
<form class="mt-3">
<div class="form-group">
<input type="text" class="form-control" id="nametext2" aria-describedby="name" placeholder="Name">
<div class="d-flex justify-content-start">
<small id="name1" class="badge badge-default text-info bg-info-subtle form-text">Helper Text</small>
</div>
</div>
</form>
To use add
justify-content-start
class to the text
Center Helper Text
Center Helper Text - View Code
<form class="mt-3">
<div class="form-group mb-0">
<input type="text" class="form-control" id="nametext4" aria-describedby="name" placeholder="Name">
<p class="text-center mb-0">
<small id="name45" class="badge badge-default text-warning bg-warning-subtle form-text">Helper Text</small>
</p>
</div>
</form>
To use add text-center
class to the text
Right Helper Text
Right Helper Text - View Code
<form class="mt-3">
<div class="form-group">
<input type="text" class="form-control" id="nametext12" aria-describedby="name" placeholder="Name">
<div class="d-flex justify-content-end">
<small id="name13" class="badge badge-default text-danger bg-danger-subtle form-text">Helper Text</small>
</div>
</div>
</form>
To use add
justify-content-end
class to the text
Inline Helper Text
Inline Helper Text - View Code
<form class="mt-3">
<div class="row">
<div class="col-md-8">
<input type="text" class="form-control" id="helpInput10" placeholder="Helper Text">
</div>
<div class="col-md-4">
<small class="text-muted">Helper Text</small>
</div>
</div>
</form>
Inline Helper Text With Color
Inline Helper Text With Color - View Code
<form class="mt-3">
<div class="row">
<div class="col-md-8">
<input type="text" class="form-control" id="helpInput11" placeholder="Help Text">
</div>
<div class="col-md-4 block-tag">
<small class="badge bg-success-subtle text-success ">Helper Text</small>
</div>
</div>
</form>
Input With Validaton
Input With Success
Input With Success - View Code
<form class="mt-3">
<label class="form-" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control is-valid" id="inputSuccess1">
<div class="valid-feedback">
Success! You've done it.
</div>
</form>
To use add is-valid
class to the input
Input With Danger
Input With Danger - View Code
<form class="mt-3">
<label class="form-" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control is-invalid" id="inputDanger1">
<div class="invalid-feedback">
Sorry, that username's taken. Try another?
</div>
</form>
To use add is-invalid
class to the input
Inline Input With Success
Inline Input With Success - View Code
<form class="mt-3 form-horizontal">
<form class="mt-3 form-horizontal">
<div class="form-group row">
<label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control is-valid" id="inputHorizontalSuccess" placeholder="[email protected]">
<div class="valid-feedback">Success! You've done it.</div>
</div>
</div>
</form>
To use add form-horizontal
class to the input
Inline Input With Danger
Inline Input With Danger - View Code
<form class="mt-3 form-horizontal">
<div class="form-group row">
<label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control is-invalid" id="inputHorizontalDnger" placeholder="[email protected]">
<div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
</div>
</div>
</form>
To use add form-horizontal
class to the input
Input With Tooltip
Tooltip Bottom
Tooltip Bottom - View Code
<form class="mt-3">
<input type="text" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom" class="form-control" placeholder="Bottom">
</form>
Tooltip Right
Tooltip Right - View Code
<form class="mt-3">
<input type="text" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right" class="form-control" placeholder="Right">
</form>
Tooltip Top
Tooltip Top - View Code
<form class="mt-3">
<input type="text" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" class="form-control" placeholder="Top">
</form>
Tooltip Left
Tooltip Left - View Code
<form class="mt-3">
<input type="text" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left" class="form-control" placeholder="Left">
</form>
Input Text Styles
Input Text Bold
Input Text Bold - View Code
<form class="mt-3">
<input type="text" class="form-control fw-bold" placeholder="Bold Text">
</form>
Input Text Normal
Input Text Normal - View Code
<form class="mt-3">
<input type="text" class="form-control fw-normal" placeholder="Normal Text">
</form>
Input Text Light
Input Text Light - View Code
<form class="mt-3">
<input type="text" class="form-control fw-light" placeholder="Light Text">
</form>
Input Text Italic
Input Text Italic - View Code
<form class="mt-3">
<input type="text" class="form-control font-italic" placeholder="Italic Text">
</form>
Input Text Lowercase
Input Text Lowercase - View Code
<form class="mt-3">
<input type="text" class="form-control text-lowercase" placeholder="Lowercase">
</form>
Input Text Uppercase
Input Text Uppercase - View Code
<form class="mt-3">
<input type="text" class="form-control text-uppercase" placeholder="Uppercase">
</form>
Input Text Capitalize
Input Text Capitalize - View Code
<form class="mt-3">
<input type="text" class="form-control text-capitalize" placeholder="capitalize">
</form>
Input Sizing
Small Input
Small Input - View Code
<form class="mt-3">
<input type="text" id="example-input-small" name="example-input-small" class="form-control form-control-sm" placeholder="Small">
</form>
Normal Input
Normal Input - View Code
<form class="mt-3">
<input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal">
</form>
Large Input
Large Input - View Code
<form class="mt-3">
<input type="text" id="example-input-large" name="example-input-large" class="form-control form-control-lg" placeholder="Large">
</form>
Definições
Tema
Intensidade do tema
Direção do tema
Cores do tema
Opção do contentor
Tipo de sidebar
Estilo do cartão
Quick Page Links
- Modern /dashboards/dashboard1
- Dashboard /dashboards/dashboard2
- Contacts /apps/contacts
- Posts /apps/blog/posts
- Detail /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow
- Shop /apps/ecommerce/shop
- Modern /dashboards/dashboard1
- Dashboard /dashboards/dashboard2
- Contacts /apps/contacts
- Posts /apps/blog/posts
- Detail /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow
- Shop /apps/ecommerce/shop
Shopping Cart
5 new
Supreme toys cooker
Kitchenware Item
$250
Supreme toys cooker
Kitchenware Item
$250
Supreme toys cooker
Kitchenware Item
$250
Sub Total
$2530
Total
$6830