Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap full width search box

I try to make a full width search box. its working in tab and mobile but not working in desktop or laptop

Here is my code

<div class="row">
<div class="col-md-offset-2 col-sm-offset-2 col-xs-offset-1 col-md-8 col-sm-8 col-xs-10">    
<form action="" autocomplete="off" class="navbar-form" method="post" accept-charset="utf-8">
        <div class="input-group">
            <input name="searchtext" value="" class="form-control" type="text">
            <span class="input-group-btn">
               <button class="btn btn-default" type="submit" id="addressSearch">
                   <span class="icon-search"></span>
               </button>
            </span>
        </div>
    </form>
</div>
</div>

when I see the responsive view its working on mobile and tab view enter image description here

But its not working in desktop view enter image description here

like image 471
Nur Uddin Avatar asked Jul 22 '15 13:07

Nur Uddin


1 Answers

Remove you nav-bar class and add form-horizontal

<form action="" autocomplete="off" class="form-horizontal" method="post" accept-charset="utf-8">
        <div class="input-group">
            <input name="searchtext" value="" class="form-control" type="text">
            <span class="input-group-btn">
               <button class="btn btn-default" type="submit" id="addressSearch">
                   <span class="icon-search"></span>
               </button>
            </span>
        </div>
    </form>
like image 199
Ubiquitous Developers Avatar answered Sep 27 '22 22:09

Ubiquitous Developers