CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Nate
Nate

Reputation: 28454

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."

Upvotes: 13

Views: 83557

Answers (4)

addmoss
addmoss

Reputation: 702

Solution 1 - Using the Grid

Use the Bootstrap’s predefined grid classes for arranging the form elements.

The grid gives you a better control over the width of the elements and scales better than the Inline Form solution.

Grid form example

<form>
<div class="form-row"> 

   <div class="form-group col-md-7">
       <input type="text" class="form-control" name="watch" value="" placeholder="watch">
    </div>

   <div class="form-group col-md-3">
   <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">$</div>
        </div>
        <input type="text" class="form-control" id="price0" placeholder="Price (optional)">
   </div>  
  </div>

  <div class="form-group col-md-2">
    <button type="submit" class="btn btn-primary" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
  </div>

</div>
</form>

Solution 2: Inline Form:

Use an Inline Form, as described by Bootstrap Inline Form Documentation. You need to manually address the width and alignment.

Inline Form snapshot

<form class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" name="watch" value="" placeholder="watch">
  </div>

  <div class="input-group m-2">
     <div class="input-group-prepend">
          <div class="input-group-text">$</div>
     </div>
     <input type="text" class="form-control" id="price" placeholder="Price (optional)">
  </div>  

  <button type="submit" class="btn btn-primary m-2" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</form>

Running Example

This JSFiddle shows both solutions running.

The sample code and fiddle are updated for Bootstrap 4.

Upvotes: 18

Kilreaux
Kilreaux

Reputation: 268

You can use Inline Forms like in the Bootstrap Documentation found here: https://getbootstrap.com/docs/3.4/css/#forms-inline

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

Upvotes: 19

luky
luky

Reputation: 2370

In Bootstrap 4 you use multiple 

<div class="col"></div>

Upvotes: 0

oqx
oqx

Reputation: 2377

Use grid layout with xs phone size to force grid on responsive, the grid is divided into 12 cells so you'll need 3 x 4.

<div class="row">
   <div class="col-xs-4">
   </div>
   <div class="col-xs-4">
   </div>
   <div class="col-xs-4">
   </div>
</div>

You could also have one of them bigger than the others: 

<div class="row">
   <div class="col-xs-7">
   </div>
   <div class="col-xs-3">
   </div>
   <div class="col-xs-2">
   </div>
</div>

As long as they add up to 12.

Demo

Bootstrap Grid

Upvotes: 3

Related Questions