Bootstrap inline form (input + button) breaks line

Question

I've been using Bootstrap for a while. I wouldn't say I'm an expert but I'm proficient. Nevertheless, this form-inline issue got me head over heels:

It's a very simple thing what I'm trying, yet here I am, unable to put two elements in line:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">
<div class="col-xs-6">
  <form class="form-inline">
    <div class="form-group">
      <label for="modal_add_group_input"></label>
      <input class="form-control" id="modal_add_group_input" placeholder="Nombre de grupo" type="text">
    </div>
    <button type="submit" class="btn btn-success">
        <span style="color: white;" class="glyphicon glyphicon-plus-sign">      
        </span> Crear Grupo</button>
    </form>
</div>
</div>
</div>

Not trying anything fancy here. I went back to basics and even the provided example doesn't work:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

...any suggestions? What am I doing wrong? Ç_Ç

PS: Not a duplicate of Bootstrap inline form's submit button not in the same line . Tried that. Didn't work.

so all you want to do is place the input and button beside one another? — Scanner
– Scanner, Commented Jan 14, 2016 at 10:09

ppollono · Accepted Answer · 2016-01-15 11:40:44Z

2

The issue you see in the snippet is because of the breakpoint (form-group component goes 100% width). Do you need it to be in the same line for mobile devices?

well, here you have the 3 solutions

Inline for big screens
Inline for all screen sizes
Inline for all screen sizes NO GRID (updated answer)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> **Inline for big screens devices**
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
<hr> **Inline for all screen sizes**
<form class="form-horizontal">
  <div class="form-group">
    <div class="col-xs-6">
      <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
      <div class="input-group">
        <div class="input-group-addon">$</div>
        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
        <div class="input-group-addon">.00</div>
      </div>
    </div>
    <div class="col-xs-6">
      <button type="submit" class="btn btn-primary">Transfer cash</button>
    </div>
  </div>
</form>

<hr>
<div class="container">
  **Inline for all screen sizes NO GRID**
  <div class="row">

    <div class="col-xs-6">
      <form>
        <div class="pull-right">
          <button type="submit" class="btn btn-primary">Transfer cash</button>
        </div>
        <div class="">
          <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
            <div class="input-group-addon">.00</div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

edited Jan 15, 2016 at 11:40

answered Jan 14, 2016 at 10:27

ppollono

3,6721 gold badge24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xDaizu Over a year ago

I like your solution, but I wanted to avoid using "col-xs" inside the form-group (I thought about it), because I would like the button to take as much space as it needs for its text and the rest filled by the input field.

xDaizu Over a year ago

Thank you, it worked like a charm. Would you mind modifying the last example to be inside a col-xs-X, inside a row, inside a container like my example so I can accept it? ^^

Collectives™ on Stack Overflow

Bootstrap inline form (input + button) breaks line

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related