Nate Nate - 24 days ago 4
CSS Question

How to put multiple Bootstrap inputs on same line?

I have the following HTML:

<input type="text" class="form-control" name="watch" value="" placeholder="watch">

<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;">
</div>

<span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>


JSFIDDLE

It renders like this:

enter image description here

How can I get both inputs and the button on the same line? I've been messing with the CSS but can't seem to get it to work. I was able to get it working with a table, but I know a CSS solution would be "better."

Answer

You can use Inline Forms like in the Bootstrap Documentation found here: http://getbootstrap.com/css/

The 'form-inline' class is probably what you're looking for.

Comments