I'm trying to get the dropdown menu to appear next to text "Pay every". How can I do this with bootstrap classes without editing the css or giving it a new custom class?
<div class="form-group">
<label class="col-sm-2 control-label">Offer:</label>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="$1000"></div>
<div class="form-group">
<div class="i-checks col-sm-1">
<label class="control-label"> <input type="radio" value="option1" name="a" checked> All at once </label>
</div>
<div class="i-checks col-sm-2">
<label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label>
<select class="form-control" name="every" disabled >
<option>2 weeks</option>
<option>1 months</option>
<option>2 months</option>
<option>3 months</option>
<option>6 months</option>
</select>
</div>
</div>
</div>
Give textual form controls like <input> s and <textarea> s an upgrade with custom styles, sizing, focus states, and more.
For default size . form-control is used, for smaller size we can use . form-control class along with . form-control-sm and for larger size we can use .
form-outline class which provides a material design look. Example label. Show code.
The form-inline
class is the bootstrap class for creating forms with inline controls. Everything within each form-group
is displayed inline.
<div class="form-inline">
<div class="form-group">
<label class="control-label">Offer:</label>
<input type="text" class="form-control" placeholder="$1000">
</div>
<div class="form-group">
<div class="i-checks">
<label class="control-label">
<input type="radio" value="option1" name="a" checked> All at once </label>
</div>
</div>
<div class="form-group">
<div class="i-checks">
<label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label>
<select class="form-control" name="every" disabled >
<option>2 weeks</option>
<option>1 months</option>
<option>2 months</option>
<option>3 months</option>
<option>6 months</option>
</select>
</div>
</div>
</div>
You can see how it looks live here: http://www.bootply.com/WXOIcKQN6y
Simply put it in a new col?
<div class="row">
<div class="col-sm-4 form-group">
<label class="control-label">Offer:</label>
<input type="text" class="form-control" placeholder="$1000">
</div>
<div class="col-sm-4 form-group">
<div class="i-checks">
<label class="control-label">
<input type="radio" value="option1" name="a" checked> All at once </label>
</div>
</div>
<div class="col-sm-4 form-group">
<div class="i-checks">
<label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label>
<select class="form-control" name="every" disabled >
<option>2 weeks</option>
<option>1 months</option>
<option>2 months</option>
<option>3 months</option>
<option>6 months</option>
</select>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With