bootstrap 4 search bar
bootstrap 4 search bar
xxxxxxxxxx<form class="form-inline"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></form>Source: getbootstrap.com
Closely Related Answers
xxxxxxxxxx<div class="input-group"> <input id="search-input" type="search" class="form-control" placeholder="Search anything..."> <button id="search-button" type="button" class="btn btn-primary"> <i class="fa fa-search"></i> </button></div>Source: Grepper
xxxxxxxxxx<div class="input-group"> <div class="form-outline"> <input id="search-input" type="search" id="form1" class="form-control" /> <label class="form-label" for="form1">Search</label> </div> <button id="search-button" type="button" class="btn btn-primary"> <i class="fas fa-search"></i> </button></div>Source: mdbootstrap.com
xxxxxxxxxx<div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon2"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2">Search/span> </div></div>Source: getbootstrap.com
xxxxxxxxxx<div class="input-group"> <input class="form-control border-end-0 border rounded-pill" type="text" value="search" id="example-search-input"> <span class="input-group-append"> <button class="btn btn-outline-secondary bg-white border-start-0 border rounded-pill ms-n3" type="button"> <i class="fa fa-search"></i> </button> </span> </div>Source: stackoverflow.com
xxxxxxxxxx<div class="form-group has-search"><span class="fa fa-search form-control-feedback"></span><input type="text" class="form-control" placeholder="Search">Source: www.sliderrevolution.com
xxxxxxxxxx<div class="input-group md-form form-sm form-1 pl-0"> <div class="input-group-prepend"> <span class="input-group-text purple lighten-3" id="basic-text1"><i class="fas fa-search text-white" aria-hidden="true"></i></span> </div> <input class="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search"></div><div class="input-group md-form form-sm form-1 pl-0"> <div class="input-group-prepend"> <span class="input-group-text cyan lighten-2" id="basic-text1"><i class="fas fa-search text-white" aria-hidden="true"></i></span> </div> <input class="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search"></div><div class="input-group md-form form-sm form-1 pl-0"> <div class="input-group-prepend"> <span class="input-group-text pink lighten-3" id="basic-text1"><i class="fas fa-search text-white" aria-hidden="true"></i></span> </div> <input class="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search"></div><div class="input-group md-form form-sm form-2 pl-0"> <input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <span class="input-group-text amber lighten-3" id="basic-text1"><i class="fas fa-search text-grey" aria-hidden="true"></i></span> </div></div><div class="input-group md-form form-sm form-2 pl-0"> <input class="form-control my-0 py-1 lime-border" type="text" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <span class="input-group-text lime lighten-2" id="basic-text1"><i class="fas fa-search text-grey" aria-hidden="true"></i></span> </div></div><div class="input-group md-form form-sm form-2 pl-0"> <input class="form-control my-0 py-1 red-border" type="text" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <span class="input-group-text red lighten-3" id="basic-text1"><i class="fas fa-search text-grey" aria-hidden="true"></i></span> </div></div>Source: mdbootstrap.com
Twitter 
LinkedIn