Bootstrap class: .input-group-append

<div class="input-group">
  <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
  <div class="input-group-append">
    <button class="btn btn-success" type="button">Love it</button>


Sass source

/* _input-group.scss:69 */
.input-group-append {
  display: flex;

  // Ensure buttons are always above inputs for more visually pleasing borders.
  // This isn't needed for `.input-group-text` since it shares the same border-color
  // as our inputs.
  .btn {
    position: relative;
    z-index: 2;

  .btn + .btn,
  .btn + .input-group-text,
  .input-group-text + .input-group-text,
  .input-group-text + .btn {
    margin-left: -$input-border-width;

/* _input-group.scss:89 */
.input-group-append { margin-left: -$input-border-width; }

// Textual addons
// Serves as a catch-all element for any text or radio/checkbox input you wish
// to prepend or append to an input.

.input-group-text {
  display: flex;
  align-items: center;
  padding: $input-padding-y $input-padding-x;
  margin-bottom: 0; // Allow use of 

Uses variables

Code copied to the clipboard.

Copying failed

/* _input-group.scss:69 */

/* _input-group.scss:89 */

More in Bootstrap Form Input Groups