Input Addons Left
-
Input Addons Left - View Code
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
Add span with
.input-group-text
class before
<input>
@
Input Addons Both Side
Input Addons Both Side - View Code
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
Add span with
.input-group-text
class before & after
<input>
$ .00
Input Addons Right
Input Addons Right - View Code
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<span class="input-group-text">@</span>
</div>
Add span with
.input-group-text
class after
<input>
@
Input Addons Left Icon
Input Addons Left Icon - View Code
<div class="input-group">
<span class="input-group-text"><i data-feather="file-text" class="feather-sm fill-white"></i></span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
Input Addons Both Side Icon
Input Addons Both Side Icon - View Code
<div class="input-group mb-3">
<span class="input-group-text"><i data-feather="file-text" class="feather-sm fill-white"></i></span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text"><i data-feather="trash-2" class="feather-sm fill-white"></i></span>
</div>
Input Addons Right Icon
Input Addons Right Icon - View Code
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<span class="input-group-text"><i data-feather="file-text" class="feather-sm fill-white"></i></span>
</div>
Addons With Checkbox
Right Checkbox
Addons With Right Checkbox - View Code
<form>
<div class="input-group">
<div class="input-group-text">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="checkbox3" value="check">
<label class="form-check-label" for="checkbox3"></label>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
</form>
To use add
input-group-prepend
before input field.
Checkbox & Button
Addons With Checkbox & Button - View Code
<form>
<div class="input-group">
<div class="input-group-text">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="checkbox2" value="check">
<label class="form-check-label" for="checkbox2"></label>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
<button class="btn bg-info-subtle text-info " type="button">Go!</button>
</div>
</form>
To use add
input-group-prepend & append
before and afetr input field.
Left Checkbox
Addons With Left Checkbox - View Code
<form>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with checkbox">
<div class="input-group-text">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="checkbox4" value="check">
<label class="form-check-label" for="checkbox4"></label>
</div>
</div>
</div>
</form>
To use add
input-group-append
after input field.
Addons With Radio
Left Radio
Addons With Left Radio - View Code
<form>
<div class="input-group">
<div class="input-group-text">
<div class="form-check">
<input type="radio" id="customRadio5" name="customRadio" class="form-check-input">
<label class="form-check-label" for="customRadio5"></label>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
</form>
To use add
input-group-prepend
before input field.
Radio & Button
Addons With Radio & Button - View Code
<form>
<div class="input-group">
<button class="btn bg-info-subtle text-info " type="button">Go!</button>
<input type="text" class="form-control" aria-label="Text input with radio button">
<div class="input-group-text">
<div class="form-check">
<input type="radio" id="customRadio6" name="customRadio" class="form-check-input">
<label class="form-check-label" for="customRadio6"></label>
</div>
</div>
</div>
</form>
To use add
input-group-prepend & append
before and afetr input field.
Right Radio
Addons With Right Radio - View Code
<form>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with radio button">
<div class="input-group-append">
<div class="input-group-text">
<div class="form-check">
<input type="radio" id="customRadio7" name="customRadio" class="form-check-input">
<label class="form-check-label" for="customRadio7"></label>
</div>
</div>
</div>
</div>
</form>
To use add
input-group-append
after input field.
Addons With Buttons
Color Button Left
Addons With Color Button Left - View Code
<form class="mt-3">
<div class="input-group mb-3">
<button class="btn bg-info-subtle text-info " type="button">Go!</button>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
</form>
To use add button
in the prepend div.
Color Buttons Both
Addons With Color Buttons Both - View Code
<form class="mt-3">
<div class="input-group mb-3">
<button class="btn bg-danger-subtle text-danger d-flex align-items-center" type="button"><i data-feather="heart" class="fill-white feather-sm me-1"></i> Love</button>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
<button class="btn bg-info-subtle text-info d-flex align-items-center" type="button"><i data-feather="slash" class="fill-white feather-sm me-1"></i>Hate</button>
</div>
</form>
To use add button
in the prepend and append div.
Color Button Right
Addons With Color Button Right - View Code
<form class="mt-3">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
<button class="btn bg-info-subtle text-info " type="button">Go!</button>
</div>
</form>
To use add button
in the append div.
Icon Button Left
Addons With icon Button Left - View Code
<form class="mt-3">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn bg-info-subtle text-info" type="button">
<i data-feather="settings" class="fill-white feather-sm"></i>
</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
</form>
Icon Buttons Both
Addons With icon Buttons Both - View Code
<form class="mt-3">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn bg-info-subtle text-info" type="button">
<i data-feather="edit-2" class="fill-white feather-sm"></i>
</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
<button class="btn bg-danger-subtle text-danger" type="button">
<i data-feather="trash-2" class="fill-white feather-sm"></i>
</button>
</div>
</form>
Icon Button Right
Addons With icon Button Right - View Code
<form class="mt-3">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
<button class="btn bg-danger-subtle text-danger" type="button">
<i data-feather="heart" class="fill-white feather-sm"></i>
</button>
</div>
</form>
Multiple Addons
Addons With Left Side
Addons With Left Side - View Code
<form class="mt-3">
<div class="input-group">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
</form>
To use add
input-group-text
class in the input-group-prepend class.
Addons With Right Side
Addons With Right Side - View Code
<form class="mt-3">
<div class="input-group">
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
</form>
To use add
input-group-text
class in the input-group-append class.
Multiple Inputs with Addons
Input With Right Side
Input With Right Side - View Code
<form class="mt-3">
<div class="input-group">
<span class="input-group-text">First and last name</span>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
</form>
To use add form-control
two times.
Input With Left Side
Input With Left Side - View Code
<form class="mt-3">
<div class="input-group">
<input type="text" class="form-control">
<input type="text" class="form-control">
<span class="input-group-text">First and last name</span>
</div>
</form>
To use add form-control
two times.
Button Addons
Button With Left Side
Button With Left Side - View Code
<form class="mt-3">
<div class="input-group">
<button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
<input type="text" class="form-control" placeholder="Left Side" aria-label="" aria-describedby="basic-addon1">
</div>
</form>
To use add button
in the prepend class.
Button With Right Side
Button With Right Side - View Code
<form class="mt-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Right Side" aria-label="Recipient's username" aria-describedby="basic-addon2">
<button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
</div>
</form>
To use add button
in the append class.
Multiple Buttons With Left Side
Multiple Buttons With Left Side - View Code
<form class="mt-3">
<div class="input-group">
<button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
<button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
<input type="text" class="form-control" placeholder="Left Side" aria-label="" aria-describedby="basic-addon1">
</div>
</form>
Multiple Buttons With Left Side
Multiple Buttons With Left Side - View Code
<form class="mt-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Right Side" aria-label="Recipient's username" aria-describedby="basic-addon2">
<button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
<button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
</div>
</form>
Addons With Dropdown Buttons
Addons With Left Side Dropdown
Addons With Left Side Dropdown - View Code
<form class="mt-3">
<div class="input-group">
<button class="btn bg-info-subtle text-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
</form>
To use add dropdown
in the prepend class div.
Addons With Right Side Dropdown
Addons With Right Side Dropdown - View Code
<form class="mt-3">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<button class="btn bg-info-subtle text-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</form>
To use add dropdown
in the append class div.
Addons With Left Side Dropdown Segments
Addons With Left Side Dropdown Segments - View Code
<form class="mt-3">
<div class="input-group">
<button type="button" class="btn bg-secondary-subtle text-secondary ">Action</button>
<button type="button" class="btn bg-secondary-subtle text-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>
</form>
Addons With Right Side Dropdown Segments
Addons With Right Side Dropdown Segments - View Code
<form class="mt-3">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<button type="button" class="btn bg-secondary-subtle text-secondary ">Action</button>
<button type="button" class="btn bg-secondary-subtle text-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</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