CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
brain storm
brain storm

Reputation: 31252

nested div results in inline-elements in bootstrap3?

I am using Bootstrap 3.1.1. I find that enclosing <div class="input-group col-lg-3"> results in stacking of input boxes as shown below, while doing a nested 

<div class-"col-lg-3">
    <div class="input-group>
        ....
    </div>
</div>

results in inline-elements. I would like to know if there is any logical reasoning behind this?

<div class="container">
    <div class="col-lg-3">
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" placeholder="Enter price">
        </div>
    </div>
    <div class="col-lg-3">
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" placeholder="Enter price">
            <span class="input-group-addon">per item</span>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Enter price">
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Search</button>
            </span>
        </div>
    </div>
</div>

enter image description here

<div class="container">
    <div class="input-group col-lg-3">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control" placeholder="Enter price">
    </div>
    <div class="input-group col-lg-3">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control" placeholder="Enter price">
        <span class="input-group-addon">per item</span>
    </div>
    <div class="input-group col-lg-3">
        <input type="text" class="form-control" placeholder="Enter price">
        <span class="input-group-btn">
            <button class="btn btn-primary" type="submit">Search</button>
        </span>
    </div>
</div>

enter image description here

Upvotes: 0

Views: 142

Answers (2)

cvrebert
cvrebert

Reputation: 9289

From the Bootstrap documentation:

Input groups

Don't mix with other components

Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

In other words, <div class="input-group col-lg-3"> is wrong. Instead you should write:

<div class="col-lg-3">
    <div class="input-group">

Upvotes: 0

jme11
jme11

Reputation: 17372

The reason is that the default css for an input-group[class*=col-] removes the float and padding.

Here's the rule: 

.input-group[class*=col-] {
  float: none;
  padding-left: 0;
  padding-right: 0;
}

This overrides the normal column css which is dependent on float left so the columns sit side-by-side and 15px of padding to create the column gutters.

Not to have this effect, you can override or remove this rule, wrap your input-group in a separate element (as you have done) or use one of the combination of forms/form-groups/input-groups in the documentation.

Upvotes: 2

Related Questions