CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Celestine Timmy
Celestine Timmy

Reputation: 55

positioning my button near the text box for an html document

i need help in getting my seach button near my text box it seems to come below the text box program:

<div class="search-full text-right">
    <a class="pull-right search-close"><i class=" fa fa-times-circle"></i></a>
    <div class="searchInputBox pull-right">
        <input type="search"
               data-searchurl="search?="
               name="q"
               placeholder="start typing and hit enter to search"
               class="search-input">
        <button class="btn-nobg search-btn" type="submit">
            <i class="fa fa-search"> </i>
        </button>
    </div>
</div>

Upvotes: 0

Views: 154

Answers (1)

Patrick Proulx
Patrick Proulx

Reputation: 66

As per Bootstrap standard, using an input-group is the best bet.

See: http://getbootstrap.com/components/#input-groups-buttons

Bootply Example using some of your code

HTML:

<div class="row">
 <div class="col-lg-6">
  <div class="input-group">
   <input type="search"
           data-searchurl="search?="
           name="q"
           placeholder="start typing and hit enter to search"
           class="search-input form-control">
   <span class="input-group-btn">
    <button class="btn search-btn" type="submit">
        <i class="glyphicon glyphicon-search"> </i>
    </button>
   </span>
  </div><!-- /input-group -->
 </div><!-- /.col-lg-6 -->
</div>

EDIT: I've also created a Bootply fork with the 'clear' button for you, though it's slightly hacked. See Bootply

Upvotes: 2

Related Questions