4

I'm helping with a website and learning all of these skills as I go. I saw similar questions but did not find a helpful resolution.

You can see on the upper right of this screenshot that the search box and button refuse to be on the same line. https://i.stack.imgur.com/AWWAw.png

HTML code for the search box looks like this: 

    <div class="col-sm-3 col-md-3 pull-right">
    <form class="navbar-form" role="search">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search"         name="srch-term" id="srch-term">
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="icon-search"> </i></button>
        </div>
        </div>
        </form>
        </div>

CSS code looks like this: https://raw.github.com/immenselyalive/dresswithease/master/bootstrap.css

madth3
  • 7,275
  • 12
  • 50
  • 74
Melisa
  • 43
  • 1
  • 1
  • 5
  • 1
    I tried to use the tag n00b. But I wasn't allowed. Ironically I need a reputation of 1500 to do that. – Melisa Sep 14 '13 at 05:27
  • 3
    possible duplicate of [bootstrap: align input with button](http://stackoverflow.com/questions/10615872/bootstrap-align-input-with-button) – Mr. Alien Sep 14 '13 at 05:31

1 Answers1

5

You could use the supplied block of code from the docs as a baseline for your code.

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Go!</button>
</div>

http://getbootstrap.com/2.3.2/base-css.html#forms (search for Buttons instead of text)

James Bruckner
  • 909
  • 7
  • 10
  • Thank you! I tried that code, then used the "input-append" in the div class with my current code and it did what I wanted it to do. – Melisa Sep 14 '13 at 05:47