I am using Bootstrap 4, and i am trying to place a search box which toggles to full width when the icon is clicked.
In Bootstrap 3, it was done like this example: https://bootsnipp.com/snippets/featured/simple-navbar-search
But I am not sure how to achieve the same in Bootstrap 4 as so much has changed in bootstrap 4.
How do i modify the above example?
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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.