CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
dhrm
dhrm

Reputation: 14934

Bootstrap radio group - horizontal alignment

I've this Bootstrap markup with a inline radio group:

<div class="container">
    <section id="content">

        <form class="form-horizontal" role="form" name="myForm">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>

                <div class="panel-body">

                    <div class="form-group">
                        <div class="col-sm-6 col-sm-offset-3">
                            <label for="myField" class="control-label">Radio title:</label>

                            <label class="radio-inline">
                                <input type="radio" name="myField" value="normal" /> RADIO1
                            </label>

                            <label class="radio-inline">
                                <input type="radio" name="myField" value="high" /> RADIO2
                            </label>
                        </div>
                    </div>

                </div>
            </div>
        </form>

    </section>
</div>

It looks like this:

Screenshot

How can I make the title and radio input align horizontally?

See this JSFiddle: http://jsfiddle.net/dennismadsen/u6qus4ud/1/.

Upvotes: 0

Views: 10203

Answers (4)

rohit
rohit

Reputation: 29

In label tag change the radio-inline class to radio class.

<label class="radio">
<input type="radio" name="myField" value="normal" /> RADIO1
 </label>
<label class="radio">
`enter code here`<input type="radio" name="myField" value="high" /> RADIO2
                            </label>

Upvotes: -1

ketan
ketan

Reputation: 19341

Add vertical-align:middle; Or vertical-align:top; in label.

label {
vertical-align: middle;
}

check Fiddle.

Upvotes: 3

Wobby
Wobby

Reputation: 106

To achieve this, you will need to use the vertical-align property.

Upvotes: 2

Justinas
Justinas

Reputation: 43479

Apply .form-group .radio-inline { vertical-align: top; } to them

Upvotes: 0

Related Questions