0

I searched a lot and FOUND a few references on STACK but I am posting this anyways (it is a "duplicate" question but the accepted answer doesn't seem to work in any of my cases)

STACK LINK: bootstrap: align input with button

I can't seem to display a button inline with form-control element (input text),,

I have three versions of the same thing

Fiddle: http://jsfiddle.net/7Cu9w/9/

<div class="form-inline col-xs-4">
    <label class="control-label">New Tag: </label>
    <input class="form-control"/>
    <button type="button" class="btn btn-primary">Add</button>
</div>

    <br/><br/>

<div class="form-horizontal col-xs-4">
    <label class="control-label">New Tag: </label>
    <input name="search" id="search" class="form-control"/>
    <button class="btn">button</button>
</div>

    <br/><br/>

<div class="input-append col-xs-4">
    <label class="control-label">New Tag: </label>
    <input name="search" id="search" class="form-control"/>
    <button class="btn">button</button>
</div>

I found a variety of similar ideas and answers but no matter what I do, they do not work..

My fiddle: http://jsfiddle.net/7Cu9w/9/

Can someone please help me with this?

Community
  • 1
  • 1
GRowing
  • 4,629
  • 13
  • 52
  • 75

1 Answers1

1

You can use Bootstrap's column properties to specify the layout you would like WITHIN YOUR .form-inline, like so:

JSFiddle.

If that's the property you would like all your input/button pairs to have, I would recommend using an &:extend() and a specific .input-button class in your LESS, but that's how you would go about solving this problem.

Ceili
  • 1,308
  • 1
  • 11
  • 17