Bootstrap Search

Bootstrap search is a component which enables a process of finding words, sentences, and numbers in the collection of documents, web pages or other sources.

It can be implemented with buttons or icons and placed as an input or in navbar for even better user experience.

Examples of Bootstrap search use:

  • Databases
  • Search engines
  • Built-in search box on documentation page (like the one on the left)

You can use material design version or default bootstrap style.


Basic example

                            
<md-input label="Search" type="text" class="mt-0"/>
                            
                        
                            
<input className="form-control" type="text" placeholder="Search" aria-label="Search"/>
                            
                        

Search with colorful border

Colorful always or only in the :focus state.

                            
<md-input label="Search" type="text" class="active-pink active-pink-2 mt-0 mb-3"/>
<md-input label="Search" type="text" class="active-purple active-purple-2 mt-0 mb-3"/>
<md-input label="Search" type="text" class="active-cyan active-cyan-2 mt-0 mb-3"/>
<md-input label="Search" type="text" class="active-pink-2 mt-0 mb-3"/>
<md-input label="Search" type="text" class="active-purple-2 mt-0 mb-3"/>
<md-input label="Search" type="text" class="active-cyan-2 active-purple-2 mt-0 mb-3"/>
                            
                        
                            
.active-pink-2 input[type=text]:focus:not([readonly]) {
    border-bottom: 1px solid #f48fb1;
    box-shadow: 0 1px 0 0 #f48fb1;
}
.active-pink input[type=text] {
    border-bottom: 1px solid #f48fb1;
    box-shadow: 0 1px 0 0 #f48fb1;
}
.active-purple-2 input[type=text]:focus:not([readonly]) {
    border-bottom: 1px solid #ce93d8;
    box-shadow: 0 1px 0 0 #ce93d8;
}
.active-purple input[type=text] {
    border-bottom: 1px solid #ce93d8;
    box-shadow: 0 1px 0 0 #ce93d8;
}
.active-cyan-2 input[type=text]:focus:not([readonly]) {
    border-bottom: 1px solid #4dd0e1;
    box-shadow: 0 1px 0 0 #4dd0e1;
}
.active-cyan input[type=text] {
    border-bottom: 1px solid #4dd0e1;
    box-shadow: 0 1px 0 0 #4dd0e1;
}
                            
                        
                          
<div className="active-pink-3 active-pink-4 mb-3">
  <input className="form-control" type="text" placeholder="Search" aria-label="Search"/>
</div>
<div className="active-purple-3 active-purple-4 mb-3">
  <input className="form-control" type="text" placeholder="Search" aria-label="Search"/>
</div>
<div className="active-cyan-3 active-cyan-4 mb-3">
  <input className="form-control" type="text" placeholder="Search" aria-label="Search"/>
</div>
<div className="active-pink-4 mb-3">
  <input className="form-control" type="text" placeholder="Search" aria-label="Search"/>
</div>
<div className="active-purple-4 mb-3">
  <input className="form-control" type="text" placeholder="Search" aria-label="Search"/>
</div>
<div className="active-cyan-4 mb-3">
  <input className="form-control" type="text" placeholder="Search" aria-label="Search"/>
</div>
                          
                      
                          
.active-pink-4 input[type=text]:focus:not([readonly]) {
    border: 1px solid #f48fb1;
    box-shadow: 0 0 0 1px #f48fb1;
}
.active-pink-3 input[type=text] {
    border: 1px solid #f48fb1;
    box-shadow: 0 0 0 1px #f48fb1;
}
.active-purple-4 input[type=text]:focus:not([readonly]) {
    border: 1px solid #ce93d8;
    box-shadow: 0 0 0 1px #ce93d8;
}
.active-purple-3 input[type=text] {
    border: 1px solid #ce93d8;
    box-shadow: 0 0 0 1px #ce93d8;
}
.active-cyan-4 input[type=text]:focus:not([readonly]) {
    border: 1px solid #4dd0e1;
    box-shadow: 0 0 0 1px #4dd0e1;
}
.active-cyan-3 input[type=text] {
    border: 1px solid #4dd0e1;
    box-shadow: 0 0 0 1px #4dd0e1;
}
                          
                      

Search with icon

Colorful always or only in the :focus state.

                            
<form-inline class="md-form">
  <fa icon="search" />
  <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
</form-inline>
<form-inline class="md-form active-pink active-pink-2">
  <fa icon="search" />
  <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
</form-inline>
<form-inline class="md-form active-purple active-purple-2">
  <fa icon="search" />
  <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
</form-inline>
<form-inline class="md-form active-cyan active-cyan-2 ">
  <fa icon="search" />
  <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
</form-inline>
<form-inline class="md-form active-pink-2">
  <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
  <fa icon="search" />
</form-inline>
<form-inline class="md-form active-purple-2">
  <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
  <fa icon="search" />
</form-inline>
<form-inline class="md-form active-cyan-2 ">
  <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
  <fa icon="search" />
</form-inline>
                            
                        
                            
.active-pink-2 input[type=text]:focus:not([readonly]) {
    border-bottom: 1px solid #f48fb1;
    box-shadow: 0 1px 0 0 #f48fb1;
}
.active-pink input[type=text] {
    border-bottom: 1px solid #f48fb1;
    box-shadow: 0 1px 0 0 #f48fb1;
}
.active-purple-2 input[type=text]:focus:not([readonly]) {
    border-bottom: 1px solid #ce93d8;
    box-shadow: 0 1px 0 0 #ce93d8;
}
.active-purple input[type=text] {
    border-bottom: 1px solid #ce93d8;
    box-shadow: 0 1px 0 0 #ce93d8;
}
.active-cyan-2 input[type=text]:focus:not([readonly]) {
    border-bottom: 1px solid #4dd0e1;
    box-shadow: 0 1px 0 0 #4dd0e1;
}
.active-cyan input[type=text] {
    border-bottom: 1px solid #4dd0e1;
    box-shadow: 0 1px 0 0 #4dd0e1;
}
.active-cyan .fa, .active-cyan-2 .fa {
    color: #4dd0e1;
}
.active-purple .fa, .active-purple-2 .fa {
    color: #ce93d8;
}
.active-pink .fa, .active-pink-2 .fa {
    color: #f48fb1;
}
                            
                        
                            
<form className="form-inline mt-4 mb-4">
  <i className="fa fa-search" aria-hidden="true"></i>
  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
</form>
<form className="form-inline active-pink-3 active-pink-4 mb-4">
  <i className="fa fa-search" aria-hidden="true"></i>
  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
</form>
<form className="form-inline active-purple-3 active-purple-4 mb-4">
  <i className="fa fa-search" aria-hidden="true"></i>
  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
</form>
<form className="form-inline active-cyan-3 active-cyan-4 mb-4">
  <i className="fa fa-search" aria-hidden="true"></i>
  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
</form>
<form className="form-inline mb-4">
  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search" />
  <i className="fa fa-search" aria-hidden="true"></i>
</form>
<form className="form-inline active-pink-4 mb-4">
  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search" />
  <i className="fa fa-search" aria-hidden="true"></i>
</form>
<form className="form-inline active-purple-4 mb-4">
  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search" />
  <i className="fa fa-search" aria-hidden="true"></i>
</form>
<form className="form-inline active-cyan-4 mb-4">
  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search" />
  <i className="fa fa-search" aria-hidden="true"></i>
</form>
                            
                        
                            
.active-pink-4 input[type=text]:focus:not([readonly]) {
    border: 1px solid #f48fb1;
    box-shadow: 0 0 0 1px #f48fb1;
}
.active-pink-3 input[type=text] {
    border: 1px solid #f48fb1;
    box-shadow: 0 0 0 1px #f48fb1;
}
.active-purple-4 input[type=text]:focus:not([readonly]) {
    border: 1px solid #ce93d8;
    box-shadow: 0 0 0 1px #ce93d8;
}
.active-purple-3 input[type=text] {
    border: 1px solid #ce93d8;
    box-shadow: 0 0 0 1px #ce93d8;
}
.active-cyan-4 input[type=text]:focus:not([readonly]) {
    border: 1px solid #4dd0e1;
    box-shadow: 0 0 0 1px #4dd0e1;
}
.active-cyan-3 input[type=text] {
    border: 1px solid #4dd0e1;
    box-shadow: 0 0 0 1px #4dd0e1;
}
.active-cyan-3 .fa, .active-cyan-4 .fa {
    color: #4dd0e1;
}
.active-purple-3 .fa, .active-purple-4 .fa {
    color: #ce93d8;
}
.active-pink-3 .fa, .active-pink-4 .fa {
    color: #f48fb1;
}
                            
                        

Search with input group

                
.input-group.md-form.form-sm.form-1 input{
    border: 1px solid #bdbdbd;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.input-group.md-form.form-sm.form-2 input {
    border: 1px solid #bdbdbd;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.input-group.md-form.form-sm.form-2 input.red-border  {
    border: 1px solid #ef9a9a;
}
.input-group.md-form.form-sm.form-2 input.lime-border  {
    border: 1px solid #cddc39;
}
.input-group.md-form.form-sm.form-2 input.amber-border  {
    border: 1px solid #ffca28;
}
                
            
                
<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="fa 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="fa 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="fa 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="fa 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="fa 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="fa fa-search text-grey" aria-hidden="true"></i></span>
  </div>
</div>
                
            

Search with buttons MDB Pro component

Info notification

MDB has many buttons to use within search box. Take a look here to know all the possibilities.

                
<form-inline class="mr-auto mb-4">
  <md-input class="mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
  <btn gradient="aqua" rounded size="sm" type="submit" class="mr-auto">Search</btn>
  <md-input class="mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
  <btn outline color="warning" rounded size="sm" type="submit" class="mr-auto">Search</btn>
  <md-input class="mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
  <btn color="unique" rounded size="sm" type="submit" class="mr-auto">Search</btn>
</form-inline>
<form class="form-inline mr-auto">
  <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
  <btn gradient="aqua" rounded size="sm" type="submit" class="mr-auto">Search</btn>
  <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
  <btn outline color="warning" rounded size="sm" type="submit" class="mr-auto">Search</btn>
  <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
  <btn color="unique" rounded size="sm" type="submit" class="mr-auto">Search</btn>
</form>
                
            


Search within select MDB Pro component

                
<template>
  <container>
    <select-wrapper>
      <select-input @click.native="openSelect(1)" :text="text[1]"></select-input>
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave">
        <select-options search v-show="active[1]" class="collapse-item">
          <select-option disabled>Choose your option</select-option>
          <select-option @click.native="chooseOption" value="Option 1">Option nr 1</select-option>
          <select-option @click.native="chooseOption" value="Option 2">Option nr 2</select-option>
          <select-option @click.native="chooseOption" value="Option 3">Option nr 3</select-option>
          <select-option @click.native="chooseOption" value="Option 4">Option nr 4</select-option>
          <select-option @click.native="chooseOption" value="Option 5">Option nr 5</select-option>
        </select-options>
      </transition>
    </select-wrapper>
    <label>Example label</label>
  </container>
</template>

<script>
import { Container, SelectWrapper, SelectInput, SelectOptions, SelectOption } from 'mdbvue';

export default {
  name: 'MasksPage',
  components: {
    Container,
    SelectWrapper,
    SelectInput,
    SelectOptions,
    SelectOption
  },
  data() {
    return {
      active: {
        0: false,
        1: false,
        2: false
      },
      value: {
        0: false,
        1: false,
        2: false
      },
      text: {
        1: "Choose your option",
        2: "Choose your options"
      },
      activeSelect: false,
      elHeight: false,
      multiValues: [],
      multiTexts: []
    };
  },
  methods: {
    openSelect(index) {
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        if (index !== i) {
          this.active[i] = false;
        }
      }
      this.active[index] = true;
      this.activeSelect = index;
    },
    chooseOption(e) {
      // check if select is multiple
      if (e.target.dataset.multiple === 'true') {
        if (this.multiValues.includes(e.target.getAttribute('data-value'))) {
          let valueIndex = this.multiValues.indexOf(e.target.getAttribute('data-value'));
          this.multiValues.splice(valueIndex, 1);
          this.multiTexts.splice(valueIndex, 1);
          e.target.parentNode.classList.remove('active');
          e.target.parentNode.getElementsByTagName('input')[0].removeAttribute('checked');
          if (!this.multiValues.length) {
            this.multiValues = [];
            this.multiTexts = "Choose Your options";
          }
        } else {
          if (this.multiTexts === "Choose Your options") {
            this.multiValues = [];
            this.multiTexts = [];
          }
          this.multiValues.push(e.target.getAttribute('data-value'));
          this.multiTexts.push(e.target.parentNode.getElementsByClassName('filtrable')[0].textContent);
          e.target.parentNode.classList.add('active');
          e.target.parentNode.getElementsByTagName('input')[0].setAttribute('checked', true);
        }
        this.value[this.activeSelect] = this.multiValues;
        this.text[this.activeSelect] = this.multiTexts;
      // if not multiple
      } else {
        let activeOption = e.target.parentNode.parentNode.getElementsByClassName('active')[0];
        if (activeOption) {
          activeOption.classList.remove('active');
        }
        e.target.parentNode.classList.add('active');
        this.value[this.activeSelect] = e.target.getAttribute('data-value');
        this.text[this.activeSelect] = e.target.parentNode.getElementsByClassName('filtrable')[0].textContent;
      }
    },
    beforeEnter(el) {
      el.style.display = 'block';
      this.elHeight = el.scrollHeight;
    },
    enter(el) {
      el.style.display = 'block';
      el.style.opacity = 1;
      el.style.height = this.elHeight + 'px';
    },
    afterEnter(el) {
      el.style.overflowY = 'auto';
    },
    beforeLeave(el) {
      el.style.overflowY = 'hidden';
      el.style.opacity = 0;
      el.style.height = 0;
      this.remove = setTimeout(() => {
        el.style.display = 'none';
      }, 500);
    },
    toggleDropdown(index) {
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        if (index !== i) {
          this.active[i] = false;
        }
      }
      this.active[index] = !this.active[index];
    },
    allDropdownsClose(target) {
      // check if target is multiple select
      if (target) {
        if (target.dataset.multiple === 'true') {
          return;
        }
      }
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        this.active[i] = false;
      }
    },
    onClick(e) {
      let parent = e.target;
      let body = document.getElementsByTagName('body')[0];
      while (parent !== body) {
        if (parent.classList.contains('search') || parent.classList.contains('dropdown') || parent.classList.contains('btn-group')) {
          return;
        }
        parent = parent.parentNode;
      }
      if (!e.target.classList.contains('select-dropdown')) {
        this.allDropdownsClose(e.target);
      }
    }
  },
  mounted() {
    document.addEventListener('click', this.onClick);
  },
  destroyed() {
    document.removeEventListener('click', this.onClick);
  }
};
</script>

<style scoped>
.collapse-item {
  overflow: hidden;
  opacity: 0;
  height: 0;
  transition: .5s;
}
</style>
                
            

Search within multiselect MDB Pro component

                
<template>
  <container>
    <select-wrapper multiple>
      <select-input @click.native="openSelect(2)" :text="text[2]"></select-input>
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave">
        <select-options search v-show="active[2]" class="collapse-item">
          <select-option disabled>Choose your options</select-option>
          <select-option @click.native="chooseOption" multiple value="Option 1">Option nr 1</select-option>
          <select-option @click.native="chooseOption" multiple value="Option 2">Option nr 2</select-option>
          <select-option @click.native="chooseOption" multiple value="Option 3">Option nr 3</select-option>
          <select-option @click.native="chooseOption" multiple value="Option 4">Option nr 4</select-option>
          <select-option @click.native="chooseOption" multiple value="Option 5">Option nr 5</select-option>
          <btn save color="primary" size="sm">Save</btn>
        </select-options>
      </transition>
    </select-wrapper>
    <label>Example label</label>
  </container>
</template>

<script>
import { Container, SelectWrapper, SelectInput, SelectOptions, SelectOption } from 'mdbvue';

export default {
  name: 'MasksPage',
  components: {
    Container,
    SelectWrapper,
    SelectInput,
    SelectOptions,
    SelectOption
  },
  data() {
    return {
      active: {
        0: false,
        1: false,
        2: false
      },
      value: {
        0: false,
        1: false,
        2: false
      },
      text: {
        1: "Choose your option",
        2: "Choose your options"
      },
      activeSelect: false,
      elHeight: false,
      multiValues: [],
      multiTexts: []
    };
  },
  methods: {
    openSelect(index) {
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        if (index !== i) {
          this.active[i] = false;
        }
      }
      this.active[index] = true;
      this.activeSelect = index;
    },
    chooseOption(e) {
      // check if select is multiple
      if (e.target.dataset.multiple === 'true') {
        if (this.multiValues.includes(e.target.getAttribute('data-value'))) {
          let valueIndex = this.multiValues.indexOf(e.target.getAttribute('data-value'));
          this.multiValues.splice(valueIndex, 1);
          this.multiTexts.splice(valueIndex, 1);
          e.target.parentNode.classList.remove('active');
          e.target.parentNode.getElementsByTagName('input')[0].removeAttribute('checked');
          if (!this.multiValues.length) {
            this.multiValues = [];
            this.multiTexts = "Choose Your options";
          }
        } else {
          if (this.multiTexts === "Choose Your options") {
            this.multiValues = [];
            this.multiTexts = [];
          }
          this.multiValues.push(e.target.getAttribute('data-value'));
          this.multiTexts.push(e.target.parentNode.getElementsByClassName('filtrable')[0].textContent);
          e.target.parentNode.classList.add('active');
          e.target.parentNode.getElementsByTagName('input')[0].setAttribute('checked', true);
        }
        this.value[this.activeSelect] = this.multiValues;
        this.text[this.activeSelect] = this.multiTexts;
      // if not multiple
      } else {
        let activeOption = e.target.parentNode.parentNode.getElementsByClassName('active')[0];
        if (activeOption) {
          activeOption.classList.remove('active');
        }
        e.target.parentNode.classList.add('active');
        this.value[this.activeSelect] = e.target.getAttribute('data-value');
        this.text[this.activeSelect] = e.target.parentNode.getElementsByClassName('filtrable')[0].textContent;
      }
    },
    beforeEnter(el) {
      el.style.display = 'block';
      this.elHeight = el.scrollHeight;
    },
    enter(el) {
      el.style.display = 'block';
      el.style.opacity = 1;
      el.style.height = this.elHeight + 'px';
    },
    afterEnter(el) {
      el.style.overflowY = 'auto';
    },
    beforeLeave(el) {
      el.style.overflowY = 'hidden';
      el.style.opacity = 0;
      el.style.height = 0;
      this.remove = setTimeout(() => {
        el.style.display = 'none';
      }, 500);
    },
    toggleDropdown(index) {
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        if (index !== i) {
          this.active[i] = false;
        }
      }
      this.active[index] = !this.active[index];
    },
    allDropdownsClose(target) {
      // check if target is multiple select
      if (target) {
        if (target.dataset.multiple === 'true') {
          return;
        }
      }
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        this.active[i] = false;
      }
    },
    onClick(e) {
      let parent = e.target;
      let body = document.getElementsByTagName('body')[0];
      while (parent !== body) {
        if (parent.classList.contains('search') || parent.classList.contains('dropdown') || parent.classList.contains('btn-group')) {
          return;
        }
        parent = parent.parentNode;
      }
      if (!e.target.classList.contains('select-dropdown')) {
        this.allDropdownsClose(e.target);
      }
    }
  },
  mounted() {
    document.addEventListener('click', this.onClick);
  },
  destroyed() {
    document.removeEventListener('click', this.onClick);
  }
};
</script>

<style scoped>
.collapse-item {
  overflow: hidden;
  opacity: 0;
  height: 0;
  transition: .5s;
}
</style>