Bootstrap 4 - how to make 100% width search input in Navbar?
Updated 2019
As of Bootstrap 4 the Navbar is flexbox so creating a full-width search input is easier. You can simply use w-100 and d-inline utility classes:
<form class="mx-2 my-auto d-inline w-100">
<div class="input-group">
<input type="text" class="form-control" placeholder="...">
<span class="input-group-append">
<button class="btn btn-outline-secondary" type="button">GO</button>
</span>
</div>
</form>
http://www.codeply.com/go/sbfCXYgqoO
Here's another example with the search input outside of the collapsing navbar:
<!-- search input not in navbar collapse -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="d-flex flex-grow-1">
<a href="/" class="navbar-brand">Codeply</a>
<form class="mr-2 my-auto w-100 d-inline-block order-1">
<div class="input-group">
<input type="text" class="form-control border border-right-0" placeholder="Search...">
<span class="input-group-append">
<button class="btn btn-outline-light border border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</div>
<button class="navbar-toggler order-0" type="button" data-toggle="collapse" data-target="#navbar7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse flex-shrink-1 flex-grow-0 order-last" id="navbar7">
<ul class="navbar-nav">
..
</ul>
</div>
</nav>
http://www.codeply.com/go/sbfCXYgqoO
And, finally another example that varies the width of the search on desktop/mobile (only full width on mobile) from my answer here
Bootstrap 3 (original answer)
You can use the text-truncate hack on the last navbar li like this..
<li class="text-truncate">
<form class="input-group">
<input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
<div class="input-group-btn">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</form>
</li>
In Bootstrap 4, text-truncate will set:
overflow: hidden;
white-space: nowrap;
This enables the search form to fill the remaining width and not wrap.
Demo http://www.codeply.com/go/22naSu3c0E
Another option is to use table-cell:
<form>
<div class="table-cell"> </div>
<div class="table-cell fill-width">
<input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
</div>
<div class="table-cell">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</form>
http://www.codeply.com/go/JdbPvotSXg
Bootstrap, make search bar take full width when nav-bar is collapsed
I think you are trying to change CSS of a bootstrap element try using !important tag with the class Name ,
.quick-google
{
min-width: 250px;
width: 100% !important;
}
Bootstrap 4 – navbar search form min width
Found acceptable solution - key is remove flex-wrap:wrap from css, for example with @media(min-width:992px), search form must have "display:flex;flex-basis:100%" or "width:100%". This will move search in second line.
Bootstrap 4 - widening a navbar's inline form input
Use the utility classes such as d-inline w-100 as needed. If you don't want the input to be full width, use w-50, w-75, etc...
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a href="/" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- links -->
<form class="mx-2 my-auto d-inline w-100" action="">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
</nav>
Demo: https://www.codeply.com/go/SW2f1PJUA3
Also see: Bootstrap 4 — how to make 100% width of the search input in navbar?
Bootstrap 4 - making centered search form take full width on small screens only
The sizing utils like w-100 are not responsive. Use a column (eg. col-md-3) to set the width instead...
https://www.codeply.com/go/FVo4F81ShR
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a href="/" class="navbar-brand">Codeply</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCodeply">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarCodeply">
<form class="mx-2 my-auto d-inline mx-auto col-md-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="...">
<span class="input-group-btn">
<button class="btn btn-outline-secondary" type="button">GO</button>
</span>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
...
</div>
</li>
</ul>
</div>
</nav>
How to add toggle full width search box to the Navbar in Bootstrap 4?
Change the Navbar as needed for Bootstrap 4. Notice the structure has changed. It now uses flexbox, the input-group classes, nav-item, etc.. are all different...
I used this tool to convert the Navbar structure from 3 to 4. Then adjust the input-group classes...
<nav class="navbar navbar-light bg-light fixed-top navbar-expand-sm" role="navigation">
<div class="container">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> ☰
</button> <a class="navbar-brand" href="#">Brand</a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active nav-item"><a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item"><a href="#" class="nav-link">Link</a>
</li>
<li class="dropdown nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">Action</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a href="#" class="nav-link">Link</a>
</li>
<li class="dropdown nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">Action</a>
</li>
<li class="dropdown-item"><a href="#">Another action</a>
</li>
<li class="dropdown-item"><a href="#">Something else here</a>
</li>
<li class="divider dropdown-item"></li>
<li class="dropdown-item"><a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button type="reset" class="btn btn-secondary">
<span class="fa fa-remove">
<span class="sr-only">Close</span>
</span>
</button>
</div>
<div class="input-group-append">
<button type="submit" class="btn btn-secondary">
<span class="fa fa-search">
<span class="sr-only">Search</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</nav>
You'll also need to modify the CSS. The padding for the buttons, height, etc..
@media (min-width: 768px) {
.navbar-collapse {
padding-top: 0px !important;
padding-right: 38px !important;
}
.navbar-collapse form[role="search"] {
width: 38px;
}
.navbar-collapse form[role="search"] input {
font-size: 15pt;
opacity: 0;
display: none;
}
.navbar-collapse form[role="search"].active {
width: 100%;
}
.navbar-collapse form[role="search"].active button,
.navbar-collapse form[role="search"].active input {
display: table-cell;
opacity: 1;
}
}
https://www.codeply.com/go/mLnFOWZqVo
How to stretch the searchbox in a navbar using bootstrap 5?
Just use w-100 on the containing form...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="//via.placeholder.com/180x52" alt="Brand image" width="180" height="52"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="d-flex ms-auto me-auto border w-100">
<input class="form-control" id="searchbox" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
Codeply
Making my navbar form search field full width
This can be achieved with display:flex; and wrapping the relevant elements in divs. I set the first and second div to flex-shrink:1;, which means they shrink to the content of the div. Then I have added flex-grow: 1;to the second div so it fills the remaining space.
I also added width:100%; to the input field.
.flex { display:flex;}.flex > div { padding:0 5px; flex-shrink:1;}.flex > div:nth-child(2) { flex-grow: 1;}input { width:100%;}.collapse { display:none;}<nav class="navbar navbar-expand-md navbar-dark bg-primary"> <div class="container flex"> <div> <a class="navbar-brand" [routerLink]="['/home']">Web App</a> </div> <div> <form class="form-inline"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> </form> </div> <div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false"> <span class="navbar-toggler-icon">Menu</span> </button>
<div class="collapse navbar-collapse" id="test"> <ul *ngIf="!loggedIn()" class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" [routerLink]="['/register']">Register</a> </li> <li class="nav-item"> <a class="nav-link" [routerLink]="['/login']">Login</a> </li> </ul> </div> </div> </div></nav>Related Topics
Rounded Tables in Twitter Bootstrap 3
Convert Letter-Tracking Value Set in Photoshop to Equivalent Letter-Spacing in CSS
What Is the Purpose of Using Font: Inherit
Do I Need to Generate a CSS File from Pygments for My Jekyll Blog, to Enable Colorful Code Snippet
Ember.Js Router: How to Animate State Transitions
Drawing Animated Arc with Pure CSS
Google Chrome Not Respecting Z-Index
How to Specify a CSS Shorthand for "All Elements Except the First/Last"
Understanding the Difference Between the Flex and Flex-Grow Properties
How to Exclude a Specific Element from Inheriting CSS Rules
Less Immediate Parent Selector