fat fantasma fat fantasma - 9 days ago 5
HTML Question

Bootstrap 3.0: How to have text and input on same line?

I'm currently switching my website over to Bootstrap 3.0. I'm having an issue with form input and text formatting. What worked in Bootstrap 2 does not work in Bootstrap 3.

How can I get text on the same line before and after a form input? I have narrowed it down to a problem with the 'form-control" class in the Bootstrap 3 version of the example.

How would I go about getting all the text and input on one line? I would like the bootstrap 3 example to look like the bootstrap 2 example in the jsfiddle.

JS fiddle example

<div class="container ">
<form>
<h3> Format used to look like this in Bootstrap 2 </h3>
<div class="row ">
<label for="return1"><b>Return:</b></label>
<input id="return1" name='return1' class=" input input-sm" style="width:150px"
type="text" value='8/28/2013'>
<span id='return1' style='color:blue'> +/- 14 Days</span>
</div>

<br>
<br>
<h3> BootStrap 3 Version </h3>

<div class="row">
<label for="return2"><b>Return:</b></label>
<input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
type="text" value='8/28/2013'>
<span id='return2' style='color:blue'> +/- 14 Days</span>
</div>
</form>




Update:
I change the code to this which works but having trouble with alignment now. Any ideas?

<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>



Answer

I would put each element that you want inline inside a separate col-md-* div within your row. Or force your elements to display inline. The form-control class displays block because that's the way bootstrap thinks it should be done.

Comments