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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS