Create an inline form with input-groups bootstrap

Question

I'm trying to create a simple inline form using input groups to display icons before the inputs. As far as I'm aware of I'm following the documentation but the form doesn't display as expected. See this JSFiddle, it demonstrates the problem. I assumed it should be displayed like this (only with the icons prepended of course). How can this be solved?

My code:

<form class="form-inline" role="form">
    <div class="form-group">    
        <div class="input-group">                       
            <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
            <input type="email" class="form-control" placeholder="Enter email"/>
        </div>
    </div>

    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
            <input type="password" class="form-control" placeholder="Choose password"/>
        </div>
    </div>                          

    <button type="submit" class="btn btn-default">Create account</button>
</form>

Jeewes · Accepted Answer · 2015-12-18 10:37:31Z

33

This is known issue and will be fixed in Bootstrap v.3.2.0 according to this ship list.

Before that you can fix it your self like this:

.input-group {
    display: inline-table;
    vertical-align: middle;

    .input-group-addon,
    .input-group-btn,
    .form-control {
        width: auto !important;
    }
}

edited Dec 18, 2015 at 10:37

answered Apr 24, 2014 at 19:17

Jeewes

1,3632 gold badges16 silver badges18 bronze badges

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

4 Comments

Paul Odeon Over a year ago

I can confirm both statements above to be correct :)

Xipooo Over a year ago

Thank you. I was getting quite frustrated with myself thinking I had done everything according to the documentation. I just needed an upgrade.

Dejell Over a year ago

it wasn't fixed in 3.3.6

Rachel S Over a year ago

This works, but what's up with the brackets? My validator claims those nested brackets are invalid.

Damian Trzepała · Accepted Answer · 2014-01-10 20:32:14Z

15

i've made it work like this:

<form class="form-inline" role="form">
<div class="row">
    <div class="form-group col-sm-3">
        <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>

            <input type="email" class="form-control" placeholder="Enter email" />
        </div>
    </div>
    <div class="form-group col-sm-3">
        <div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>

            <input type="password" class="form-control" placeholder="Choose password" />
        </div>
    </div>
    <button type="submit" class="btn btn-default">Create account</button>
</div>

http://jsfiddle.net/n5qmc/

edited Jan 10, 2014 at 20:32

answered Jan 9, 2014 at 20:21

Damian Trzepała

2663 silver badges8 bronze badges

5 Comments

Ben Over a year ago

This doesn't work, while the form is rendered it is not displayed inline; which is the goal.

Damian Trzepała Over a year ago

It depends on screen resolution, you could change col size to sm?

Ben Over a year ago

I see what you're doing, you're placing the inputs in seperate columns. Not really my desired solution, but I'll work with this. Thanks :) +1A

Pierre Guilbert Over a year ago

After 1h battling with this issue I ended up taking this. thks

Ryan Angilly Over a year ago

Two reasons nobody should use this: First: you should never mix form-group with col-* -- in fact you shouldn't mix anything with col-* classes. Second: Only col-* classes can be direct descendants of rows. The final button should also be wrapped in a col-*.

jessie james jackson taylor · Accepted Answer · 2014-06-08 07:52:43Z

Taken from Bootstrap Docs

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row. I also added in semantic attributes for the labels you should always be using on every input (use .sr-only to hide the labels if necessary). This makes the form not inline but horizontal.

<form class="form-horizontal" role="form">
       <div class="form-group">
          <label for="email" class="sr-only">Email</label>
          <div class="input-group col-sm-3"> 
              <span class="input-group-addon">
                  <i class="fa fa-envelope-o fa-fw"></i>
              </span>                            
              <input type="email" id="email" name="email" class="form-control" placeholder="Enter email" />
        </div>
        <div class="form-group">
            <label for="password" class="sr-only">Password</label>
            <div class="input-group col-sm-3"> 
                <span class="input-group-addon">
                    <i class="fa fa-key fa-fw"></i>
                </span>
                <input type="password" id="password" name="password" class="form-control" placeholder="Choose password" />
            </div>  
        </div>
        <button type="submit" class="btn btn-default">Create account</button>
</form>

Ryan · Accepted Answer · 2015-10-06 18:12:31Z

Not sure if this is helpful, but I thought I would post as I haven't seen this elsewhere. I was trying to get an inline form with inline labels and an add-on using Bootstrap v3. Here is the code that worked for me. I used the grid system in divs to position the label and input group and the add-on within a grid item.

       <div class="form-group">
        <div class="col-sm-2">
          <label class="control-label" for="input_one">Label Text</label>
        </div>
        <div class="col-sm-10">
          <div class="input-group">
            <input class="form-control" placeholder="Placeholder Text" type="text" name="input_one" id="input_one">
            <span class="input-group-addon">Add on text</span>
          </div>
        </div>
      </div>

Collectives™ on Stack Overflow

Create an inline form with input-groups bootstrap

4 Answers 4

4 Comments

5 Comments

Taken from Bootstrap Docs

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

5 Comments

Taken from Bootstrap Docs

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related