How to achive a responsive behaviour in an input group

Question

My HTML looks like this:

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="input-group">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default  fa fa-check-square" data-toggle-tooltip="tooltip"
                            title="Toggle All" id="btnItemgridSelectAll" tabindex="5">
                </button>
                <button type="button" id="BtnAddPayment" class="btn btn-default BtnColor fa fa-plus-square" data-toggle-tooltip="tooltip"
                            title="Add New Row" tabindex="6">
                </button>
                <button type="button" id="btnDelete" class="btn btn-default BtnColor fa fa-trash-o" data-toggle-tooltip="tooltip"
                            title="Delete Selected Row" tabindex="7">
                </button>
            </div>
            <label  class="input-group-addon" >LongText1111111</label>

            <input class="form-control" type="text" />

            <label  class="input-group-addon" >LongText2222222</label>
        </div>
    </div>
</div>

When viewing the layout in small screen resolutions the controls inside the input-group don't wrap.

Please help me.

Answer 1

Well, depending on how you want to look when it's small and what breakpoint you would add the css to change the way it looks, here's an example. The best way to change css is to look at their CSS and then know what to change. Keep an un-minified copy around or visit the repo and look at it online.

Demo: http://jsbin.com/piyado/1/

CSS

@media (max-width:500px) { 
    .custom-input-group.input-group .input-group-btn {
      width:99%;
      display:block;
      margin-bottom:5px;
    }
    .custom-input-group.input-group .input-group-btn .btn {
        width: 34%;
    }
    .custom-input-group.input-group .input-group-btn .btn:last-child {
        border-radius:0 4px 4px 0
    }
    .custom-input-group {
        display: block
    }
    .custom-input-group.input-group  .input-group-addon {
        clear: both;
        display: block;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .custom-input-group.input-group .input-group-addon + .form-control {
        border-radius: 4px;
        margin-bottom: 5px;
    }
}

HTML

<div class="container">
         <div class="input-group custom-input-group">
            <div class="input-group-btn">
               <button type="button" class="btn btn-default  fa fa-check-square" data-toggle-tooltip="tooltip"
                  title="Toggle All" id="btnItemgridSelectAll" tabindex="5">
               1 </button>
               <button type="button" id="BtnAddPayment" class="btn btn-default BtnColor fa fa-plus-square" data-toggle-tooltip="tooltip"
                  title="Add New Row" tabindex="6">2
               </button>
               <button type="button" id="btnDelete" class="btn btn-default BtnColor fa fa-trash-o" data-toggle-tooltip="tooltip"
                  title="Delete Selected Row" tabindex="7">
               3 </button>
            </div>
            <label  class="input-group-addon" >LongText1111111</label>
            <input class="form-control" type="text" />
            <label  class="input-group-addon" >LongText2222222</label>
         </div>
      </div>