how to align the radios inputs in the bootstrap?

Question

how to align the radios inputs in the bootstrap?

Navigation

#1 by (5 votes)

6

I did it this way:

<div class="row">

        <div class="col-md-2"> <p>Discordo Totalmente</p>  <p><input type="radio"/></p></div>
        <div class="col-md-2"> <p>Discordo</p> <p><input type="radio"/></p></div>
        <div class="col-md-2"> <p>Não Concordo nem discordo</p> <p><input type="radio"/></p></div>
        <div class="col-md-2"> <p>Concordo</p> <p><input type="radio"/></p></div>
        <div class="col-md-2"> <p>Concordo Totalmente</p> <p><input type="radio"/></p></div>
        <div class="col-md-2"> <p> (Não Aplicável)</p> <p><input type="radio"/></p></div>

</div>

Problem: When the screen is set to desktop size, the text does not align with the radios.

I want the same effect as table:

<tr>
    <td>Muito d</td>
    <td>s</td>
    <td>Nem snem d</td>
    <td>sd</td>
    <td>Muito sd</td>
    <td>asd</td>
</tr>
<tr>
    <td>1 <input type="radio"  /></td>
    <td>2 <input type="radio"  /></td>
    <td>3 <input type="radio"  /></td>
    <td>4 <input type="radio" /></td>
    <td>5 <input type="radio"/> </td>
    <td>0 <input type="radio" /></td>
</tr>

text and input is misaligned

Iwouldliketomakeitalignedlikethis:

html twitter-bootstrap

asked by anonymous 18.09.2015 / 21:12

1 answer

What is the difference between setSize and setBounds? Check file extension in template - Django

score 5 · Accepted Answer

I've edited your code, see if it applies to your need:

link

I updated the above code. Notice the% w / w% I created for devices or screens above% w /%.

This CSS code can put in the media query you have there or create another file 768px ... you know.

CSS

@media screen and (min-width: 768px){
    .p-1{
        height: 50px; 
        vertical-align:top;
    }
    .p-2{
        vertical-align: bottom; 
        line-height: 50px;
    }
}

<div class="col-sm-2">
    <p class="p-1">Discordo Totalmente</p>
    <p class="p-2"><input type="radio"></p>
</div>
<div class="col-sm-2">
    <p class="p-1">Discordo</p>
    <p class="p-2"><input type="radio"></p>
</div>
<div class="col-sm-2">
    <p class="p-1">Não Concordo nem discordo</p>
    <p class="p-2"><input type="radio"></p>
</div>
<div class="col-sm-2">
    <p class="p-1">Concordo</p>
    <p class="p-2"><input type="radio"></p>
</div>
<div class="col-sm-2">
    <p class="p-1">Concordo Totalmente</p>
    <p class="p-2"><input type="radio"></p>
</div>
<div class="col-sm-2">
    <p class="p-1">(Não Aplicável)</p>
    <p class="p-2"><input type="radio"></p>
</div>