CODEWITHSUNDEEP
csstwitter-bootstrapradio-button
Remy Grandin
Remy Grandin

Reputation: 1686

Allign text with radio in horizontal form

I have an horizontal form in bootstrap 3 and I wanted to make my radio buttons bigger on my page as I think their original size is far too small.

So i have this code : 

<div class="form-group">
    <label class="col-xs-4 control-label">myfield</label>
    <div class="col-xs-8" style="padding-top: 9px;">
        <label>
            <input type="radio" name="inpPrjMp" value="1" />
            val1
        </label>
        <br />
        <label>
            <input type="radio" name="inpPrjMp" value="2" />
            val2
        </label>
    </div>
</div>

Situation : https://jsfiddle.net/7c2bv2mz/2/

However, my radio buttons labels are now not alligned with the section label.

I tried multiple things and fiddled with the margin, padding and lineheight but I can't seem to make it works, the radio label won't budge

Upvotes: 0

Views: 93

Answers (3)

Dimitar Popov
Dimitar Popov

Reputation: 31

<div class="container">
<div class="navbar navbar-default">
    <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3</a>

    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="http://getbootstrap.com/customize">Customize</a>

            </li>
        </ul>
    </div>
</div>
<div class="col-xs-12">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-xs-4 control-label">myfield</label>
            <div class="col-xs-8" style="padding-top: 9px;">
                <input type="text" class="form-control"/>
            </div>
        </div>
    </form>
</div>
<div class="col-xs-12">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-xs-4 control-label">myfield</label>
            <div class="col-xs-8" style="padding-top: 9px;">
                <label>
                <div style="line-height : 58px;">
                      <input type="radio" name="inpPrjMp" value="1" />
                    <div style="float:right;vertical-align:center">   
                         Val 1
                     </div>
                 </div>
                </label>
                <br />
                <label>
                   <div style="line-height : 58px;">
                      <input type="radio" name="inpPrjMp" value="2" />
                    <div style="float:right;vertical-align:center">   
                         Val 2
                     </div>
                     </div>
                </label>
            </div>
        </div>
    </form>
</div>


label input[type="radio"] {
  width: 55px;
  height: 58px;
  margin-top: 0px;
}

Upvotes: 0

stanze
stanze

Reputation: 2480

You can make your radio buttons bigger by changing width and height in the below class.

label input[type="radio"] {
    width: 25px;
    height: 38px;
    margin-top: -8px;
    float: left;
    margin-right: 10px;
}

Upvotes: 0

Ajai
Ajai

Reputation: 901

Have a look at my edited fiddle.

https://jsfiddle.net/p19wcspj/

<div class="container">
<div class="navbar navbar-default">
    <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3</a>

    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="http://getbootstrap.com/customize">Customize</a>

            </li>
        </ul>
    </div>
</div>
<div class="col-xs-12">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-xs-4 control-label">myfield</label>
            <div class="col-xs-8" style="padding-top: 9px;">
                <input type="text" class="form-control"/>
            </div>
        </div>
    </form>
</div>
<div class="col-xs-12">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-xs-4 control-label">myfield</label>
            <div class="col-xs-8" style="padding-top: 9px;">
                <input type="radio" name="inpPrjMp" value="1" />
                <label class="radio-label">
                    val1</label>
                <br />
                <input type="radio" name="inpPrjMp" value="2" />
                <label class="radio-label">
                    val2</label>
            </div>
        </div>
    </form>
</div>


/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
    margin: 10px;
}

input[type="radio"] {
    width: 25px;
    height: 38px;
    margin-top: -8px;
}

.radio-label{
    position:absolute;
}

Upvotes: 2

Related Questions