Search code examples
htmlcssform-control

How to align the search button to the right of search box


How do I align the button to the right of the text box, after using form control on the search box, I am able to align the button to the left of the text box but I wish to have it on the right, please help.

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-4 pull-left">
      <input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
    </div>
    <div class ="form-group pull-right"> 
       <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
    </div>
    <div class="pull-right">
       <button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
         <span class="glyphicon glyphicon-search"></span>
       </button>
    </div> 
  </div>
</div>

The search box and button


Solution

  • Fix again!

    <div class="row">
      <div class="col-sm-12">
        <div class="col-sm-4 pull-left">
          <input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
        </div>   
        <div class="pull-right">
           <button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
             <span class="glyphicon glyphicon-search"></span>
           </button>
        </div> 
        <div class ="form-group pull-right"> 
           <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
        </div>
      </div>
    </div>