content logo

Bootstrap Search Boxes:

Show - Hide Bootstrap Search Box

So, you have a complex website in which users need help when trying to find particular posts and content. As a result, you add a search box to help them look for it with more ease. The problem is that your pages are already full and you don’t want to clutter them further by adding this new feature. Even a small search box needs a lot of physical space on your pages and can ruin your website’s appearance. For this reason, you decide to look for something with a sleek and unique design with the ability to hide itself when it is not needed.

Well, we have just the right thing for you in this post. An HTML CSS search box which can save a lot of physical space. With the help of Bootstrap, you can easily show or hide Bootstrap search. There is a small magnifying glass icon which you can press to show Bootstrap search box. pressing it again will hide it again. This is a convenient little search box that will be helpful to many websites. With the code below, you will be able to add this useful search box to your own website and the best part is you don’t have to pay anything to do so. Our codes are totally free and are provided to help fellow website owners improve their work.

#

Show Bootstrap Search

#

Hide Bootstrap Search

#

HTML CSS Search Box

<!-- This script got from frontendfreecode.com -->
<form id="app" action="#">
<label :data-state="state" for="search">
  <input type="text" placeholder="Search" @click="state = 'opan'" @blur="state='close'"/>
  <i class="fa fa-search" @click="" aria-hidden="true"></i>
</label>
</form><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  height: 100vh;
  background-color: #F0AD4E;
}

label {
  position: relative;
  display: inline-block;
  background-color: #fff;
  padding: 5px 12px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  border-radius: 0;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
label::after {
  content: '';
  display: block;
  height: 2px;
  width: 80%;
  background-color: #F0AD4E;
  -webkit-transition: all 1s ease 0.5s;
  transition: all 1s ease 0.5s;
}
label input {
  -webkit-transition: width 1s ease, opacity 0.5s ease 0.5s;
  transition: width 1s ease, opacity 0.5s ease 0.5s;
  opacity: 1;
  width: 180px;
  height: 25px;
  border: 0;
  outline: none;
  color: #b06d0f;
}
label i {
  position: absolute;
  top: 11px;
  right: 11px;
  color: #333;
  cursor: pointer;
}
label[data-state="close"] {
  border-radius: 30px;
  padding: 5px 5px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
label[data-state="close"]::after {
  width: 0%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
label[data-state="close"] i {
  pointer-events: none;
}
label[data-state="close"] input {
  width: 28px;
  height: 25px;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.5s ease, width 1s ease;
  transition: opacity 0.5s ease, width 1s ease;
  -webkit-appearance: none;
}
var app = new Vue({
  el: '#app',
  data: { state: "close" } 
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></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/meyer-reset/2.0/reset.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script>
<style>
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  height: 100vh;
  background-color: #F0AD4E;
}

label {
  position: relative;
  display: inline-block;
  background-color: #fff;
  padding: 5px 12px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  border-radius: 0;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
label::after {
  content: '';
  display: block;
  height: 2px;
  width: 80%;
  background-color: #F0AD4E;
  -webkit-transition: all 1s ease 0.5s;
  transition: all 1s ease 0.5s;
}
label input {
  -webkit-transition: width 1s ease, opacity 0.5s ease 0.5s;
  transition: width 1s ease, opacity 0.5s ease 0.5s;
  opacity: 1;
  width: 180px;
  height: 25px;
  border: 0;
  outline: none;
  color: #b06d0f;
}
label i {
  position: absolute;
  top: 11px;
  right: 11px;
  color: #333;
  cursor: pointer;
}
label[data-state="close"] {
  border-radius: 30px;
  padding: 5px 5px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
label[data-state="close"]::after {
  width: 0%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
label[data-state="close"] i {
  pointer-events: none;
}
label[data-state="close"] input {
  width: 28px;
  height: 25px;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.5s ease, width 1s ease;
  transition: opacity 0.5s ease, width 1s ease;
  -webkit-appearance: none;
}
</style>

</head>
<body>
<form id="app" action="#">
<label :data-state="state" for="search">
  <input type="text" placeholder="Search" @click="state = 'opan'" @blur="state='close'"/>
  <i class="fa fa-search" @click="" aria-hidden="true"></i>
</label>
</form><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
var app = new Vue({
  el: '#app',
  data: { state: "close" } 
});
</script>

</body>
</html>
Preview