Bootstrap 3 - How to Maximize Input Width Inside Navbar

Bootstrap 3 - How to maximize input width inside navbar

For Bootstrap version 3.2 and up you should also set the display:table; for the input-group and set the width to 1% for the input-group-addon.

<div style="display:table;" class="input-group">
            <span style="width: 1%;" class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
            <input type="text" autofocus="autofocus" autocomplete="off" placeholder="Search Here" name="search" style="" class="form-control">
          </div>

Demo Bootstrap version 3.2+: http://www.bootply.com/t7O3HSGlbc

If you allow changing the position of your navbar elements? I don't understand "without creating line-breaks (i.e., that the "Clear" link will be tight with the "About" link)." Try this: http://bootply.com/78374.

What i did:

Drop the float left of the form (by dropping the navbar-left class)
Give other navbar elements a right float (the navbar-right class)
Set display of the form-group to inline (style="display:inline")
Change the position of the elements (the right floated first)

Bootstrap 3: Input group in navbar form takes up entire width

I thought of a minimal way to fix this without modifying the default structure of the navbar form used in the Bootstrap documentation.

Add class navbar-input-group to the form

<form class="navbar-form navbar-left navbar-input-group" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
  </div>
  <button type="submit" class="btn btn-default">Search</button>
</form>

CSS (place in media query if necessary):

.navbar-input-group {
  font-size: 0px; /*removes whitespace between button and input*/
}

.navbar-input-group input {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.navbar-input-group .btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 0px;
}

or SCSS (keeps responsiveness intact):

@import "bootstrap-variables";

.navbar-input-group {
  @media (min-width: $screen-sm) {
    font-size: 0px; /*removes whitespace between button and input*/

    input {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    .btn {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border-left: 0px;
    }
  }
  @media (max-width: $screen-xs-max) {
    margin-top:0px;
    margin-bottom:0px;

    .btn {
      width:100%;
    }
  }
}

Result:

Sample Image

For purposes of clarity, I am targeting descendant elements in the CSS. This is not the most efficient way to target CSS elements. If you like this answer, consider giving the input and button unique class names and targeting them without any descendant selectors in your CSS (read: http://csswizardry.com/2011/09/writing-efficient-css-selectors/)

Flexible width input field in Bootstrap 3 Navbar

Well, most folks didn't used have to design with tables, but in 99 when I began, tables created the layouts and we used spacer .gifs and all kinds of crap to design with. When you have a display:table on the container and a display:table-cell on the contents inside it, since the .form-control is empty there has to be something else to force the width of the element to take up the space, or it's going to act like an empty cell. So you have to have an empty span with some padding on it to force it.

http://jsbin.com/aXOZEXi/1 -- Bootstrap 3.0 - 3.1

http://jsbin.com/aXOZEXi/2/edit -- Bootstrap 3.2

.test {
  display:table;
}

.test > .form-control {
  display: table-cell;
  margin-left:-3px;
}

.test > span {
  display: table-cell;
  width:1%;
  padding:0 3px;
}

HTML

<form class="navbar-form">
  <div class="form-group" style="display:inline;">
    <div class="test">
      <span><!--shim--></span>
      <input type="text" class="form-control">
    </div>
  </div>
</form>

Incrase bootstrap navbar input field width

You can use the pixel value to increase the width of the text field.

<input type="text" class="form-control search-input" name="query" id="query" placeholder="prof or mod name or mod code" style="500px;">

And use the percentage value for the responsive mode.

@media (min-width: 768px){
.navbar-form .form-control { 
    width: 100%; 
}}

Bootstrap 3 - Expand and center search bar in nav bar

This may help.

.navbar-default #formID #q {  min-width: 325px;}.navbar-default .navbar-collapse {  text-align: center;}@media (max-width: 768px) {  .navbar-default #formID #q {    min-width: 100%;  }  .navbar-default .navbar-collapse {    text-align: left;  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><nav class="navbar navbar-default">  <div class="container-fluid">    <!-- Brand and toggle get grouped for better mobile display -->    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> <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="#">Schedulizer</a>
    </div>    <!-- Collect the nav links, forms, and other content for toggling -->    <div class="collapse navbar-collapse" id="navbar-collapse">      <ul class="nav navbar-nav">        <li><a href="#">Home <span class="sr-only">(current)</span></a>
        </li>        <li><a href="#">Search</a>
        </li>      </ul>      <form class="navbar-form" role="search" id="formID">        <div class="input-group">          <input class="form-control" id="q" placeholder="i.e. ECE 201, Digital Logic, Kandasamy, or 41045" name="q" type="text" value="ECEC 355 Computer Organization & Architecture " /> <span class="input-group-btn">            <input class="btn btn-primary" type="submit" value="Search"/>        </span>
        </div>      </form>    </div>    <!-- /.navbar-collapse -->  </div>  <!-- /.container-fluid --></nav>

How to make bootstrap3's navbar's input size to fill with the rest of the space?

I had the same issue just now.

I use Safari and unfortunately, the form element takes the whole line (100% of the size) (however on Firefox, it doesn't).

A simple and easy fix would be to precise the form's width below 100%.

<form class="navbar-form navbar-left" style="width:40%" role="search">
    <div class="input-group">
        <input class="form-control" placeholder="product" type="text">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Search</button>
        </span>
    </div>
</form>

Note: width-40 class instead of the style attribute doesn't fix it...don't know why however.

How can I shrink the width of a navbar form's input boxes?

There is not a built-in way to do this in Bootstrap. Check out this thread.

You could always define a CSS rule yourself or change the Bootstrap class. This is the rule you would want to change in bootstrap.css/bootstrap.min.css. This rule specifies the width when your browser is wider than 768px. Changing it here would allow for the media rules for responsiveness on smaller devices to still work.

@media(min-width: 768px){
    .navbar-form .form-control {
        display: inline-block;
        width: auto;    <---- Change this e.g. width: 100px;
        vertical-align: middle;
    }
}

Bootstrap navbar with desired width and centralized

You can add this CSS

form {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 992px) {
  form {
    width: 100%;
  }
}

form div.input-group {
  width: 100% !important;
}

It will increase the size of input on small screens to occupy all remaining space. And on the laptop I gave it width: auto but you can change this to anything you want.

Also, I gave input-group class width: 100% to match the size of form

Hope this helps. If it doesn't come back so we can work it out together :)

Fluid resizing input in Bootstrap 3 navbar

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;
}

Bootstrap 3 - How to Maximize Input Width Inside Navbar