Bootstrap Full Boot Search Field

I am trying to make the search box full width. its work on tabs and mobile devices, but not working on a desktop computer 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 a responsive view of working with mobile and tabs enter image description here

But its not working on the desktop enter image description here

+4
source share
3 answers

Remove the nav-bar class and add the horizontal shape

<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>
+11
source

Give class col-lg-12 for div

<form action="" autocomplete="off" class="navbar-form" method="post" accept-charset="utf-8">
<div class="input-group col-lg-12">
    <input name="searchtext" style="width:100%" 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>

+1
source
<div class="row">
   <div class="col-md-offset-2 col-sm-offset-2 col-xs-offset-1 col-xs-10 col-sm-8 col-md-8 col-lg-6">
     <div class="form-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>
   </div>
</div>
-1
source

Source: https://habr.com/ru/post/1599104/


All Articles