Bootstrap input-group with multiple buttons

BEFORE

notice the rounded corners on the blue button, and the width of the checkbox container.

AFTER

 

HTML


                                            <div class="input-group input-group-sm">
                                                <span class="input-group-addon">
                                                    <input type="checkbox">
                                                </span>
                                                <span class="input-group-btn">
                                                    <button class="btn btn-primary"><i class="fa fa-pencil"></i></button>
                                                </span>
                                                <span class="input-group-btn">
                                                    <button class="btn btn-brand"><i class="fa fa-minus"></i></button>
                                                </span>
                                            </div>

I had to add this to my {less} file.


----
.input-group-addon, .input-group-btn, .input-group .form-control{
  width: auto;
  &:not(:first-child):not(:last-child){
    .btn{
      border-radius: 0px;
    }
  }
}
----

Popular Posts