How to align checkbox and label with bootstrap

3

The result of this my form puts the checkboxes and labels in line, which is correct, but I can not find a bootstrap class that makes the label aligns with the checkbox.

How do I do this?

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form action="/video/genresfilter" method="post" class="form-inline">

<label><input id="Check1" name="Check1" type="checkbox" value="Check1">Check1</input></label>

<label><input id="Check2" name="Check2" type="checkbox" value="Check2">Check2</input></label>
                                                                                            
<label><input id="Check3" name="Check3" type="checkbox" value="Check3">Check3</input></label>
                                                                                              
</form>

UPDATING

Thephotoaboveisthecurrentresult,Iwantthecheckboxtobealignedwiththecheckbox1label,thecurrentresultlooksliketheboxisalignedaboveandneedstobecentered.

Thecenteroftheboxshouldmatchthecenteroftheletter"C" of the word Checkbox ...

    
asked by anonymous 29.11.2015 / 17:48

1 answer

2

See if it suits you:

label {
    display: inline-block;
}
input {
    padding: 0;
    margin:0;
    vertical-align: center;
    position: relative;
    top: 1px;
    overflow: hidden;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form action="/video/genresfilter" method="post" class="form-inline">

<label><input id="Check1" name="Check1" type="checkbox" value="Check1">Check1</label>

<label><input id="Check2" name="Check2" type="checkbox" value="Check2">Check2</label>
                                                                                            
<label><input id="Check3" name="Check3" type="checkbox" value="Check3">Check3</label>
                                                                                              
</form>

I removed the "closures" from input .

    
29.11.2015 / 18:08