Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

So this is what bootstrap's navbar form looks like.

The default HTML is:

<form class="navbar-form navbar-left" 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> 

But I want to join the input and button together like an input-group. However, when I try to wrap the input and button around an input-group, it ends up occupying the entire width:

enter image description here

HTML:

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

I've read some solutions for this, but I want to avoid using hacks like style: "width: 200px;"

Any solutions? Thanks so much in advance.

like image 745
Michelle Avatar asked Nov 10 '13 18:11

Michelle


People also ask

How do I change the input group width in bootstrap?

Change the size of the input groups, by adding the relative form sizing classes like . input-group-lg, input-group-sm, input-group-xs to the . input-group itself.

How can I reduce navbar width?

To decrease navbar height: add py-0 class to your navbar. Tip: you can combine more classes for individual viewports: e.g., py-3 py-lg-5 classes will make your navbar narrower on mobile devices and larger on laptops and desktops.

How do I make the navigation bar full width in bootstrap?

Approach 1: In Bootstrap 4, full width dropdown in Navbar might be possible by adding CSS properties either internally or externally based on conveniences. Focus on class dropdown and dropdown-menu only. Now, make top margin of dropdown-menu as zero pixel and add width to 100%.

Should bootstrap navbar be container?

It's displayed in the documentation that containers should never be nested. This statement seems to find mostly agreement in diverse stackoverflow posts. Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects.

How to set input size in Bootstrap?

Bootstrap Input Sizing 1 Input Sizing in Forms. Set the heights of input elements using classes like .input-lg and .input-sm. Set the widths of elements using grid column classes like .col-lg-* and .col-sm-*. 2 Height Sizing 3 Column Sizing 4 Help Text

What are input groups in Bootstrap?

They are similar to button groups in the sense that, they allow you to align the elements flush against each other. To create an input group, use Bootstrap's .input-group class for the actual input group, then use .input-group-addon on the element that you want to append or prepend to the form control.

What is collapse group in Bootstrap?

Bootstrap Collapse Group form controls and text together on a single line. Input groups enable you to combine form controls and text on the same line. They are similar to button groups in the sense that, they allow you to align the elements flush against each other.

How to quickly size inputs inside an input-group?

You can also quickly size all inputs and other elements inside an .input-group with the .input-group-sm or .input-group-lg classes: The following examples shows input elements with different widths using different .col-xs-* classes:


1 Answers

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:

enter image description here

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/)

like image 163
Michelle Avatar answered Oct 12 '22 21:10

Michelle