CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
user2281858
user2281858

Reputation: 1997

padding issue - bootstrap 3

Have a look at the below example in Mobile mode.

Sample

In Fieldset 3, why is there a slight padding on the left for all the labels and textboxes.

Upvotes: 0

Views: 94

Answers (2)

AyB
AyB

Reputation: 11675

Like the below answer states, you have given col-md-6 class along with your form-group for Fieldset 3. Now since you do need the col-md-6 to separate the elements into 2 columns, you could target that specific fieldset and remove the padding.

HTML:

 <form class="form-horizontal" id="fieldset3"> <!-- ID added -->
            <fieldset>
                <legend>Fieldset 3</legend>

CSS:

#fieldset3 .col-md-6{
  padding-left:0px;
}

DEMO 1

To make it easier you can also group the labels this way:

<div class="col-md-6">
    <div class="form-group">
        <!-- Label and input here -->
    </div>
    <div class="form-group">
        <!-- Label and input here -->
    </div>
    <div class="form-group">
        <!-- Label and input here -->
    </div>
</div>

<div class="col-md-6">
    <div class="form-group">
        <!-- Label and input here -->
    </div>
    <div class="form-group">
        <!-- Label and input here -->
    </div>
    <div class="form-group">
        <!-- Label and input here -->
    </div>
</div>

DEMO 2

Upvotes: 2

ndcweb
ndcweb

Reputation: 725

Cause you nestind classes for columns. First you have div.col-md-6.form-group, and inside you have label.control-label.col-md-8, so it doubles the padding for col-*.

Upvotes: 2

Related Questions