content logo

Bootstrap Search Boxes:

Bootstrap Drop Down Search Bar

Search boxes are really useful especially in websites with more than a hundred pages and content heavy sites that tend to be really complex when trying to find a certain post. Examples of sites that absolutely need a proper search bar are new sites, e-commerce sites, etc. even the small websites that have only a few pages worth of content could use a good search box if they plan on growing. In other words, no matter what kind of website you have, you can still benefit from a properly designed search box.

Below, we have the code for a Bootstrap hide search bar. The search bar is invisible and is located at the top of the page in the site header as a simple button. This means you don’t have to reorganize your web page to fit a Bootstrap search bar in there and it takes absolutely no physical space. When you click the search button however, a search bar drops down from the top where you can type in what you want to search for. Similarly, you can click anywhere else in the page to close the drop down search bar. This is a great Bootstrap search result code offered to you for free so scroll down and use it right now.

#

Bootstrap Search Result

#

Drop Down Search

#

Bootstrap Search Bar

#

Hide Search Bar


<!-- This script got from frontendfreecode.com -->
<header class="header-blue">
  <div class="top-wrap">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="container-nav">
            <div class="col-logo"> Logo </div>
            <div class="col-topics"> Categories </div>
            <div class="col-search">
              <button id="btn-search" class="btn-search">Search <i class="fa fa-search"></i></button>
            </div>
            <div class="col-ask-button"> <a href="#">Button</a> </div>
            <div class="col-menu"> menu </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="search-wrap">
    <div id="search" class="container">
      <div class="row">
        <div class="col-md-12">
          <form>
            <div class="left-side">
              <input id="searchme" type="text">
            </div>
            <div class="right-side">
              <input id="submit" type="submit" value="Submit">
            </div>
          </form>
        </div>
      </div>
    </div>
    <!--/search--> 
  </div>
</header>
<div class="container">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </p>
 
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
header.header-blue {
    z-index: 1000;
    position: -webkit-sticky;
    position: sticky;
    top: 0
}
.top-wrap {
    background: #064882;
    background: linear-gradient(-45deg, #064882, #00284c, #064882, #00284c);
    background-size: 300% 300%;
    animation: Gradient 8s ease infinite;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid #00111f;
    z-index: 99;
    position: relative;
}
.container-nav {
    position: relative;
    padding: 15px 0;
    display: flex;
    flex-wrap: nowrap;
}
.container-nav > div {
    margin-left: 30px;
}
.container-nav > .col-logo {
    margin: 0 auto 0 0;
}
.container-nav {
    display: flex;
}
.btn-search {
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
    transition: all .5s ease-out;
}
.btn-search:hover {
    color: #ccc;
}
#search-wrap {
    background: #fffcc4;
    padding: 20px 15px;
    overflow: hidden;
    opacity: 0;
    position: absolute;
    z-index: 1;
    left: -999em;
    box-sizing: border-box;
    width: 100%;
    top: 100%;
    transform: translateY(-100%);
    transition: transform 1s ease, opacity 1s ease, top 0s ease 1s, left 0s ease 1s;
}
#search-wrap.open {
    transform: translateY(0%);
    opacity: 1;
    left: 0;
    transition: transform 1s ease, opacity 1s ease;
}
#search form {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}
#search input {
    padding: 5px;
    font-size: 1.2rem;
    border-radius: 5px;
    border: 2px solid #00585f;
    width: 100%;
}
#search #submit {
    padding: 7px 10px;
    background: #ff3800;
    border: 0;
    color: #fffcc4;
    text-transform: uppercase;
}
#search .left-side {
    float: left;
    width: 75%;
}
#search .right-side {
    float: right;
    width: 20%;
}
$('html').on("click", function (event) {
    if (event.target.id === 'search-wrap' || $(event.target).parents('#search-wrap').length) {
        return;
    }
    if (event.target.id === 'btn-search') {
        $('#search-wrap').toggleClass('open');
        $('#searchme').focus();
    } else {
        $('#search-wrap').removeClass('open');
    }
});
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'></script>
<style>
header.header-blue {
    z-index: 1000;
    position: -webkit-sticky;
    position: sticky;
    top: 0
}
.top-wrap {
    background: #064882;
    background: linear-gradient(-45deg, #064882, #00284c, #064882, #00284c);
    background-size: 300% 300%;
    animation: Gradient 8s ease infinite;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid #00111f;
    z-index: 99;
    position: relative;
}
.container-nav {
    position: relative;
    padding: 15px 0;
    display: flex;
    flex-wrap: nowrap;
}
.container-nav > div {
    margin-left: 30px;
}
.container-nav > .col-logo {
    margin: 0 auto 0 0;
}
.container-nav {
    display: flex;
}
.btn-search {
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
    transition: all .5s ease-out;
}
.btn-search:hover {
    color: #ccc;
}
#search-wrap {
    background: #fffcc4;
    padding: 20px 15px;
    overflow: hidden;
    opacity: 0;
    position: absolute;
    z-index: 1;
    left: -999em;
    box-sizing: border-box;
    width: 100%;
    top: 100%;
    transform: translateY(-100%);
    transition: transform 1s ease, opacity 1s ease, top 0s ease 1s, left 0s ease 1s;
}
#search-wrap.open {
    transform: translateY(0%);
    opacity: 1;
    left: 0;
    transition: transform 1s ease, opacity 1s ease;
}
#search form {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}
#search input {
    padding: 5px;
    font-size: 1.2rem;
    border-radius: 5px;
    border: 2px solid #00585f;
    width: 100%;
}
#search #submit {
    padding: 7px 10px;
    background: #ff3800;
    border: 0;
    color: #fffcc4;
    text-transform: uppercase;
}
#search .left-side {
    float: left;
    width: 75%;
}
#search .right-side {
    float: right;
    width: 20%;
}
</style>

</head>
<body>
<header class="header-blue">
  <div class="top-wrap">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="container-nav">
            <div class="col-logo"> Logo </div>
            <div class="col-topics"> Categories </div>
            <div class="col-search">
              <button id="btn-search" class="btn-search">Search <i class="fa fa-search"></i></button>
            </div>
            <div class="col-ask-button"> <a href="#">Button</a> </div>
            <div class="col-menu"> menu </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="search-wrap">
    <div id="search" class="container">
      <div class="row">
        <div class="col-md-12">
          <form>
            <div class="left-side">
              <input id="searchme" type="text">
            </div>
            <div class="right-side">
              <input id="submit" type="submit" value="Submit">
            </div>
          </form>
        </div>
      </div>
    </div>
    <!--/search--> 
  </div>
</header>
<div class="container">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </p>
 
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$('html').on("click", function (event) {
    if (event.target.id === 'search-wrap' || $(event.target).parents('#search-wrap').length) {
        return;
    }
    if (event.target.id === 'btn-search') {
        $('#search-wrap').toggleClass('open');
        $('#searchme').focus();
    } else {
        $('#search-wrap').removeClass('open');
    }
});
</script>

</body>
</html>
Preview