CODEWITHSUNDEEP
twitter-bootstrap
user2088016
user2088016

Reputation: 99

bootstrap form controls- custome widths

If I include <div class="input-group"> control seems shorter, if I remove this div then they are exapnding. I am just trying to understand what is happening by adding input-group and form-group classes to the form. Could someone explain ?

http://jsfiddle.net/dUG4f/3/

<div class="row">
        <div class="col-xs-6">
                    <div class="panel panel-primary">
                         <div class="panel-heading"><h3 class="panel-title">Application Information</h3></div>
                         <div class="panel-body">

                                <div class="row">
                                <div class="col-lg-6 col-lg-6">
                                   <div class ="form-group">
                                        <label for="text" >Contract State</label>       
                                        <div class="input-group">    
                                            <select name="State" id="State" class="validate[required] form-control">
                                            <option value="">Choose a State</option>                    
                                            <option value="IL">Illinois</option>
                                            <option value="MN">Minnesota</option>
                                            <option value="WI">Wisconsin</option>
                                            </select>                                                       
                                        </div>
                                    </div>

                                    <div class ="form-group">
                                        <label for="text" >Application Number</label>       
                                         <div class="input-group">   
                                        <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
                                        </div>   
                                    </div>                                      


                             </div> <!-- col-lg-6 col close -->
                            </div> <!-- row close -->
                         </div> <!--  End of panel Body -->     
                    </div><!--  End of panel  -->       
                </div> <!-- end col-xs-6 -->

            <div id ="panel2" class="col-xs-6"> 
                <div class="panel panel-primary">
                    <div class="panel-heading"><h3 class="panel-title">Initial Premium</h3></div>
                        <div class="panel-body">                                

                        </div>      
                </div>  
            </div>

    </div><!-- End of second row -->

Upvotes: 1

Views: 10128

Answers (2)

Adrift
Adrift

Reputation: 59859

The .input-group class has the following rules:

.input-group {
    display: table;
    position: relative;
    border-collapse: separate;
}

It's the display: table; rule thats responsible for shortening the <select> element, since a table's width is determined by how much content it has (by default). The content "Choose a State" of the first <option> becomes its width.

The .form-group class lets an element span the width of its container:

All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default.

Upvotes: 4

Thomas
Thomas

Reputation: 10175

input-group is described here:

You need them to group a input element with an extension as described in the documentation. In your case, you might leave it out since it's only limit your elements width.

form-group is described here:

Wrap labels and controls in .form-group for optimum spacing.

Upvotes: 1

Related Questions