Align a form in navbar-header on small screens - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav Bar

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav Bar

Description

Align a form in navbar-header on small screens

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
.form-group input,
.form-group button {
   box-sizing: border-box;
}
.form-group input {
   width: calc(100% - 44px);
   max-width: 160px;
}
.form-group button {
   width: 40px;
}

      </style> 
   </head> 
   <body> 
      <nav class=""> 
         <div class="container"> 
            <div id="navbar" class="navbar-collapse collapse"> 
               <form class="navbar-form navbar-right" action="#" method="get"> 
                  <div class="form-group"> 
                     <input id="terme" name="terme" placeholder="Veuillez saisir un terme" class="form-control input-xs" type="search" src="#" poster="#"> 
                     <button type="submit" class="btn btn-info"> 
                        <span class="glyphicon glyphicon-search">as</span> 
                     </button> 
                  </div> 
               </form> 
            </div> 
         </div> 
      </nav>  
   </body><!-- w w w . j a v a2s  .com-->
</html>

Related Tutorials