Override bootstrap CSS

by audetwebdesign

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label">Promo Value</label>
        <div class="controls"> 
            <input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked>
            <label class="radio inline" id="label1">Percentage</label>
            <label for="hello" class="inline" id="label2">Upper Limit</label>
            <input id="hello" class="inline" type="text" placeholder="Text input" disabled="true" />
            <br />
            <input type="radio" name="optionsRadios1" id="optionRadios6" value="option3">
            <label class="radio inline" id="label3">Fixed Amount</label>
            <input type="text" class="inline" placeholder="Amount Rs" disabled="true">
            <hr class="hhhh"></hr>
        </div>
    </div>
</form>

CSS

.form-horizontal .control-group label.inline {
    display: inline-block;
    margin-right: 20px;
    line-height: 30px;
    vertical-align: baseline;
    margin-top: 2px;
}
.form-horizontal .control-group input.inline {
    vertical-align: baseline;
}
.form-horizontal .control-group .radio.inline {
    padding-left: 10px;
}
.form-horizontal .control-group input[type="radio"] {
    float: none;
    display: inline-block;
    vertical-align: baseline;
}

label.inline {
    outline: 1px solid blue;
}