E012

E012

Bootstrap v0.x

.input-group and .col-*-* cannot be used directly on the same element. Instead, nest the .input-group within the .col-*-*

Grid column classes (e.g. .col-xs-7) cannot be used on an .input-group. Instead, you must nest the .input-group within the grid columns.

Wrong:

<div class="input-group col-sm-5">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Right:

<div class="col-sm-5">
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Username">
  </div>
</div>

Bootstrap v1.x (Bootlint for Bootstrap v4 and newer)

.input-group and .col* cannot be used directly on the same element. Instead, nest the .input-group within the .col-*-*

Grid column classes (e.g. .col-sm-7) cannot be used on an .input-group. Instead, you must nest the .input-group within the grid columns.

Wrong:

<div class="input-group col-sm-5">
  <span class="input-group-prepend">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Right:

<div class="col-sm-5">
  <div class="input-group">
    <span class="input-group-prepend">@</span>
    <input type="text" class="form-control" placeholder="Username">
  </div>
</div>