How to align checkbox and label with bootstrap

Asked

Viewed 3,986 times

4

The result of this my form puts the checkbox and Abels in line, which is correct, but I can’t find a bootstrap class that makes the label aligned with the checkbox.

How do I do it?

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="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

inserir a descrição da imagem aqui

The photo above is the current result, I want the checkbox to be aligned with the label Checkbox1, in the current result it seems that the box is aligned above and would need to be centralized.

The center of the box must match the center of the letter "C" of the word Checkbox...

css bootstrap-3

  • Align vertically?

  • Horizontal, have them execute the code that will appear them in the horizontal without aligning.

  • 1

    Sorry for the slowness, but I still don’t understand you. You can make an image simulating what you want?

  • I put the image of the current result, the expected result I can not do (so I asked rsrs). But I explained in more detail what I want. See if you can understand now.

1 answer

3


See if this fits 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>
<link href="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" of input.

  • It was cool, but change the top to 2px, it’s better with 2 top, thanks!

Browser other questions tagged css bootstrap-3

You are not signed in. Login or sign up in order to post.