<!-- Addon on the left --><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"><idata-feather="lock"></i></span></div><inputtype="password"class="form-control"placeholder="Password"></div><!-- Addon on the right --><divclass="input-group"><inputtype="text"class="form-control"placeholder="Recipient's e-mail"><divclass="input-group-append"><spanclass="input-group-text">@example.com</span></div></div><!-- Addons on both sides --><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"><idata-feather="dollar-sign"></i></span></div><inputtype="text"class="form-control"placeholder="Amount"><divclass="input-group-append"><spanclass="input-group-text">.00</span></div></div>
// Addon on the left.input-group.input-group-prependspan.input-group-texti(data-feather="lock")input(type="password",placeholder="Password").form-control// Addon on the right.input-groupinput(type="text",placeholder="Recipient's e-mail").form-control.input-group-appendspan.input-group-text| @example.com
// Addons on both sides.input-group.input-group-prependspan.input-group-texti(data-feather="dollar-sign")input(type="text",placeholder="Amount").form-control.input-group-appendspan.input-group-text|.00
<!-- Addon on the left (rounded) --><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text rounded-left"><idata-feather="lock"></i></span></div><inputtype="password"class="form-control rounded-right"placeholder="Password"></div><!-- Addon on the right (rounded) --><divclass="input-group"><inputtype="text"class="form-control rounded-left"placeholder="Recipient's e-mail"><divclass="input-group-append"><spanclass="input-group-text rounded-right">@example.com</span></div></div><!-- Addons on both sides (rounded) --><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text rounded-left"><idata-feather="dollar-sign"></i></span></div><inputtype="text"class="form-control"placeholder="Amount"><divclass="input-group-append"><spanclass="input-group-text rounded-right">.00</span></div></div>
// Addon on the left (rounded).input-group.input-group-prependspan.input-group-text.rounded-lefti(data-feather="lock")input(type="password",placeholder="Password").form-control.rounded-right// Addon on the right (rounded).input-groupinput(type="text",placeholder="Recipient's e-mail").form-control.rounded-left.input-group-appendspan.input-group-text.rounded-right| @example.com
// Addons on both sides (rounded).input-group.input-group-prependspan.input-group-text.rounded-lefti(data-feather="dollar-sign")input(type="text",placeholder="Amount").form-control.input-group-appendspan.input-group-text.rounded-right|.00
<!-- Multiple inputs (addon on the left) --><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text font-weight-semibold">First & last name</span></div><inputclass="form-control"type="text"placeholder="First name"><inputclass="form-control"type="text"placeholder="Last name"></div><!-- Multiple inputs (addon on the right) --><divclass="input-group"><inputclass="form-control"type="text"placeholder="From date"><inputclass="form-control"type="text"placeholder="To date"><divclass="input-group-append"><spanclass="input-group-text"><idata-feather="calendar"></i></span></div></div>
// Multiple inputs (addon on the left).input-group.input-group-prependspan.input-group-text.font-weight-semiboldFirst & last nameinput(type="text",placeholder="First name").form-controlinput(type="text",placeholder="Last name").form-control// Multiple inputs (addon on the right).input-groupinput(type="text",placeholder="From date").form-controlinput(type="text",placeholder="To date").form-control.input-group-appendspan.input-group-texti(data-feather="calendar")
<!-- Button addon on the left --><divclass="input-group"><divclass="input-group-prepend"><buttonclass="btn btn-primary"type="button">Button</button></div><inputclass="form-control"type="text"placeholder="Button on the left"></div><!-- Button addon on the right --><divclass="input-group"><inputclass="form-control"type="text"placeholder="Button on the right"><divclass="input-group-append"><buttonclass="btn btn-primary"type="button">Button</button></div></div><!-- Dropdown addon on the left --><divclass="input-group"><divclass="input-group-prepend"><buttonclass="btn btn-primary dropdown-toggle"type="button"data-toggle="dropdown">Dropdown</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a></div></div><inputclass="form-control"type="text"placeholder="Dropdown on the right"></div><!-- Dropdown addon on the right --><divclass="input-group"><inputclass="form-control"type="text"placeholder="Dropdown on the right"><divclass="input-group-append"><buttonclass="btn btn-primary dropdown-toggle"type="button"data-toggle="dropdown">Dropdown</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a></div></div></div><!-- Multiple button addons --><divclass="input-group"><inputclass="form-control"type="text"placeholder="Buttons on the right"><divclass="input-group-append"><buttonclass="btn btn-secondary"type="button"><idata-feather="edit"></i></button><buttonclass="btn btn-success"type="button"><idata-feather="check-circle"></i></button><buttonclass="btn btn-danger"type="button"><idata-feather="trash-2"></i></button></div></div>
// Button addon on the left.input-group.input-group-prependbutton.btn.btn-primary(type="button")Buttoninput(type="text",placeholder="Button on the left").form-control// Button addon on the right.input-groupinput(type="text",placeholder="Button on the right").form-control.input-group-appendbutton.btn.btn-primary(type="button")Button// Dropdown addon on the left.input-group.input-group-prependbutton(type="button",data-toggle="dropdown").btn.btn-primary.dropdown-toggleDropdown.dropdown-menua.dropdown-item(href="#")Actiona.dropdown-item(href="#")Another actiona.dropdown-item(href="#")Something else hereinput(type="text",placeholder="Dropdown on the left").form-control// Dropdown addon on the right.input-groupinput(type="text",placeholder="Dropdown on the right").form-control.input-group-appendbutton.btn.btn-primary.dropdown-toggle(type="button",data-toggle="dropdown")Dropdown.dropdown-menu.dropdown-menu-righta.dropdown-item(href="#")Actiona.dropdown-item(href="#")Another actiona.dropdown-item(href="#")Something else here// Multiple button addons.input-groupinput(type="text",placeholder="Buttons on the right").form-control.input-group-appendbutton(type="button").btn.btn-secondaryi(data-feather="edit")button(type="button").btn.btn-successi(data-feather="check-circle")button(type="button").btn.btn-dangeri(data-feather="trash-2")