CODEWITHSUNDEEP
csstwitter-bootstrap-3
geekshift
geekshift

Reputation: 77

Fluid resizing input in Bootstrap 3 navbar

I want my input in the bootstrap navbar to have the maximum width possible without breaking the single row design and the mobile toggle on collapse.

col-sm-* is working on the button but not on the input. I'm trying to avoid flex-box and stick with pre-existing Boostrap classes if possible.

<nav class="navbar" role="navigation">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2">
        <div class="navbar-header">                     
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><em>FirstShop.com</em></a>
        </div>
      </div>
      <div class="col-sm-10">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <form action="">
            <div class="form-group">                                
              <input type="text" class="form-control col-sm-5">
              <button type="submit" class="btn btn-default col-sm-1">Submit</button>                                
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</nav>

Also prepared a live demo here.

Upvotes: 1

Views: 1229

Answers (2)

jme11
jme11

Reputation: 17374

By default, inputs have 100% width set, so the wrap is caused by your submit button. One way to address this is to use an input group, which will allow you to have the button element inline with the input.

Replace your form with the following markup:

HTML:

      <form class="navform">
        <div class="input-group">            
          <input type="text" class="form-control" placeholder="Search">
          <span class="input-group-btn">
            <button class="btn btn-info" type="button"><span class="glyphicon glyphicon-search"></span> Submit</button>
          </span>
        </div>
      </form>

I also added a navform class to give the form the same height as the default navbar and added padding to make the input align to the middle of the navbar.

CSS:

.navform {
    height: 50px;
    padding-top: 8px;
}

Upvotes: 0

BENARD Patrick
BENARD Patrick

Reputation: 30975

You can wrap your input in a specific sized div :

Bootply : http://www.bootply.com/UmwelBa4tU

HTML :

  <form action="" class="">
    <div class="row">           
      <div class="col-sm-5">
        <input type="text" class="form-control ">              
      </div>    

      <button type="submit" class="btn btn-default col-sm-1">Submit</button>                                
    </div>
  </form>

Upvotes: 1

Related Questions