Bootstrap CSS Classes

Bootstrap CSS 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>
  </div>
</div>

Preview

CSS 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 <label> elements by overriding our default margin-bottom
  font-size: $font-size-base; // Match inputs
  font-weight: $font-weight-normal;
  line-height: $input-line-height;
  color: $input-group-addon-color;
  text-align: center;
  white-space: nowrap;
  background-color: $input-group-addon-bg;
  border: $input-border-width solid $input-group-addon-border-color;
  @include border-radius($input-border-radius);

  // Nuke default margins from checkboxes and radios to vertically center within.
  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 0;
  }
}

Check .input-group-append in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

More Bootstrap CSS classes in Form Input Groups category

© 2024 Shuffle. All rights reserved.