<!-- Addon on the left -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i data-feather="lock"></i>
</span>
</div>
<input type="password" class="form-control" placeholder="Password">
</div>
<!-- Addon on the right -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's e-mail">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>
<!-- Addons on both sides -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i data-feather="dollar-sign"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="Amount">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>// Addon on the left
.input-group
.input-group-prepend
span.input-group-text
i(data-feather="lock")
input(type="password", placeholder="Password").form-control
// Addon on the right
.input-group
input(type="text", placeholder="Recipient's e-mail").form-control
.input-group-append
span.input-group-text
| @example.com
// Addons on both sides
.input-group
.input-group-prepend
span.input-group-text
i(data-feather="dollar-sign")
input(type="text", placeholder="Amount").form-control
.input-group-append
span.input-group-text
| .00
<!-- Addon on the left (rounded) -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-left">
<i data-feather="lock"></i>
</span>
</div>
<input type="password" class="form-control rounded-right" placeholder="Password">
</div>
<!-- Addon on the right (rounded) -->
<div class="input-group">
<input type="text" class="form-control rounded-left" placeholder="Recipient's e-mail">
<div class="input-group-append">
<span class="input-group-text rounded-right">@example.com</span>
</div>
</div>
<!-- Addons on both sides (rounded) -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-left">
<i data-feather="dollar-sign"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="Amount">
<div class="input-group-append">
<span class="input-group-text rounded-right">.00</span>
</div>
</div>// Addon on the left (rounded)
.input-group
.input-group-prepend
span.input-group-text.rounded-left
i(data-feather="lock")
input(type="password", placeholder="Password").form-control.rounded-right
// Addon on the right (rounded)
.input-group
input(type="text", placeholder="Recipient's e-mail").form-control.rounded-left
.input-group-append
span.input-group-text.rounded-right
| @example.com
// Addons on both sides (rounded)
.input-group
.input-group-prepend
span.input-group-text.rounded-left
i(data-feather="dollar-sign")
input(type="text", placeholder="Amount").form-control
.input-group-append
span.input-group-text.rounded-right
| .00
<!-- Icon addon -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i dat-feather="message-square"></i>
</span>
</div>
<textarea class="form-control" placeholder="Type your message here..." rows="6"></textarea>
</div>
<!-- Textual addon -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text font-weight-semibold">Options</span>
</div>
<select class="form-control custom-select">
<option>Choose one...</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<!-- Checkbox addon -->
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="ex-check-1">
<label class="custom-control-label" for="ex-check-1"></label>
</div>
</div>
</div>
<input class="form-control" type="text" placeholder="Checkbox here">
</div>
<!-- Radio button addon -->
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" id="ex-radio-1" name="radio">
<label class="custom-control-label" for="ex-radio-1"></label>
</div>
</div>
</div>
<input class="form-control" type="text" placeholder="Radio button here">
</div>// Icon addon
.input-group
.input-group-prepend
span.input-group-text
i(data-feather="message-square")
textarea(placeholder="Type your message here...", rows="6").form-control
// Textual addon
.input-group
.input-group-prepend
span.input-group-text.font-weight-semibold
| Options
select.form-control.custom-select
option Choose one...
option One
option Two
option Three
option Four
option Five
// Checkbox addon
.input-group.form-group
.input-group-prepend
.input-group-text
.custom-control.custom-checkbox
input(type="checkbox", id="ex-check-1").custom-control-input
label(for="ex-check-1").custom-control-label
input(type="text", placeholder="Checkbox here").form-control
// Radio button addon
.input-group.form-group
.input-group-prepend
.input-group-text
.custom-control.custom-radio
input(type="radio", id="ex-radio-1", name="radio").custom-control-input
label(for="ex-radio-1").custom-control-label
input(type="text", placeholder="Radio button here").form-control
<!-- Multiple inputs (addon on the left) -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text font-weight-semibold">First & last name</span>
</div>
<input class="form-control" type="text" placeholder="First name">
<input class="form-control" type="text" placeholder="Last name">
</div>
<!-- Multiple inputs (addon on the right) -->
<div class="input-group">
<input class="form-control" type="text" placeholder="From date">
<input class="form-control" type="text" placeholder="To date">
<div class="input-group-append">
<span class="input-group-text">
<i data-feather="calendar"></i>
</span>
</div>
</div>// Multiple inputs (addon on the left)
.input-group
.input-group-prepend
span.input-group-text.font-weight-semibold First & last name
input(type="text", placeholder="First name").form-control
input(type="text", placeholder="Last name").form-control
// Multiple inputs (addon on the right)
.input-group
input(type="text", placeholder="From date").form-control
input(type="text", placeholder="To date").form-control
.input-group-append
span.input-group-text
i(data-feather="calendar")
<!-- Button addon on the left -->
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-primary" type="button">Button</button>
</div>
<input class="form-control" type="text" placeholder="Button on the left">
</div>
<!-- Button addon on the right -->
<div class="input-group">
<input class="form-control" type="text" placeholder="Button on the right">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
<!-- Dropdown addon on the left -->
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">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>
</div>
<input class="form-control" type="text" placeholder="Dropdown on the right">
</div>
<!-- Dropdown addon on the right -->
<div class="input-group">
<input class="form-control" type="text" placeholder="Dropdown on the right">
<div class="input-group-append">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">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>
</div>
</div>
<!-- Multiple button addons -->
<div class="input-group">
<input class="form-control" type="text" placeholder="Buttons on the right">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">
<i data-feather="edit"></i>
</button>
<button class="btn btn-success" type="button">
<i data-feather="check-circle"></i>
</button>
<button class="btn btn-danger" type="button">
<i data-feather="trash-2"></i>
</button>
</div>
</div>// Button addon on the left
.input-group
.input-group-prepend
button.btn.btn-primary(type="button") Button
input(type="text", placeholder="Button on the left").form-control
// Button addon on the right
.input-group
input(type="text", placeholder="Button on the right").form-control
.input-group-append
button.btn.btn-primary(type="button") Button
// Dropdown addon on the left
.input-group
.input-group-prepend
button(type="button", data-toggle="dropdown").btn.btn-primary.dropdown-toggle Dropdown
.dropdown-menu
a.dropdown-item(href="#") Action
a.dropdown-item(href="#") Another action
a.dropdown-item(href="#") Something else here
input(type="text", placeholder="Dropdown on the left").form-control
// Dropdown addon on the right
.input-group
input(type="text", placeholder="Dropdown on the right").form-control
.input-group-append
button.btn.btn-primary.dropdown-toggle(type="button", data-toggle="dropdown") Dropdown
.dropdown-menu.dropdown-menu-right
a.dropdown-item(href="#") Action
a.dropdown-item(href="#") Another action
a.dropdown-item(href="#") Something else here
// Multiple button addons
.input-group
input(type="text", placeholder="Buttons on the right").form-control
.input-group-append
button(type="button").btn.btn-secondary
i(data-feather="edit")
button(type="button").btn.btn-success
i(data-feather="check-circle")
button(type="button").btn.btn-danger
i(data-feather="trash-2")