CODEWITHSUNDEEP
csstwitter-bootstrap
Phil
Phil

Reputation: 2236

why is my checkbox not right in bootstrap 3.2 but fine in 2.3

Sorry to have to ask something so simple, but I can't find the answer by searching or by inspecting the css between bootstrap 3.2 and 2.3.

My problem is just that my checkbox won't align right in bootstrap 3.2 but it's fine in 2.3. You can see in my fiddle by clicking the libraries for 2.3 and 3.2. I know there must be a change in the css but I don't know where that change is or why it is not aligned by default now.

http://jsfiddle.net/philphil/ps69uo79/

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <div class="checkbox">
            <label for="remember">Remember me
                <input type="hidden" name="remember" value="0">
                <input tabindex="4" type="checkbox" name="remember" id="remember" value="1">
            </label>
        </div>

Upvotes: 0

Views: 236

Answers (3)

Phil
Phil

Reputation: 2236

All I had to do was move where I typed the the label "remember" to where @tim Lewis suggested. Removing the class="checkbox" actually removed the formatting that kept everything looking nice.

<div class="form-group">
    <div class="col-md-offset-2 col-md-10 checkbox">
        <div class="checkbox">
            <label for="remember">
                <input type="hidden" name="remember" value="0">
                <input tabindex="4" type="checkbox" name="remember" id="remember" value="1">Remember me
            </label>
        </div>
    </div>
</div>

Upvotes: 0

user4297834
user4297834

Reputation:

If you get rid of the div <div class="checkbox"> it will resolve your issue. If not, then apply margin-top: -16px; to your checkboxes (which I wouldn't advise as the first solution is the proper one)

Reason being is that bootstrap has styles applied to things with the class checkbox so realistically, if you were to change the class from checkbox to say... checkbox-two it would no longer apply the bootstrap style

Upvotes: 1

Tim Lewis
Tim Lewis

Reputation: 29258

Give this a try:

<div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <label for="remember">
                <input type="hidden" name="remember" value="0">
                <input tabindex="4" type="checkbox" name="remember" id="remember" value="1"> Remember me                        
            </label>
        </div>
    </div>

You don't need the surrounding <div class="checkbox"> in 3.0

Hope that helps!

Upvotes: 1

Related Questions