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

                            
<Input hint="Search" type="text" containerClass="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.

                            
<Input hint="Search" type="text" containerClass="active-pink active-pink-2 mt-0 mb-3"/>
<Input hint="Search" type="text" containerClass="active-purple active-purple-2 mt-0 mb-3"/>
<Input hint="Search" type="text" containerClass="active-cyan active-cyan-2 mt-0 mb-3"/>
<Input hint="Search" type="text" containerClass="active-pink-2 mt-0 mb-3"/>
<Input hint="Search" type="text" containerClass="active-purple-2 mt-0 mb-3"/>
<Input hint="Search" type="text" containerClass="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.

                            
<FormInline className="md-form">
  <Fa icon="search" />
  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
</FormInline>
<FormInline className="md-form active-pink active-pink-2">
  <Fa icon="search" />
  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
</FormInline>
<FormInline className="md-form active-purple active-purple-2">
  <Fa icon="search" />
  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
</FormInline>
<FormInline className="md-form active-cyan active-cyan-2 ">
  <Fa icon="search" />
  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
</FormInline>
<FormInline className="md-form active-pink-2">
  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
  <Fa icon="search" />
</FormInline>
<FormInline className="md-form active-purple-2">
  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
  <Fa icon="search" />
</FormInline>
<FormInline className="md-form active-cyan-2 ">
  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
  <Fa icon="search" />
</FormInline>
                            
                        
                            
.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 className="input-group md-form form-sm form-1 pl-0">
  <div className="input-group-prepend">
    <span className="input-group-text purple lighten-3" id="basic-text1"><i className="fa fa-search text-white" aria-hidden="true"></i></span>
  </div>
  <input className="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search" />
</div>
<div className="input-group md-form form-sm form-1 pl-0">
  <div className="input-group-prepend">
    <span className="input-group-text cyan lighten-2" id="basic-text1"><i className="fa fa-search text-white" aria-hidden="true"></i></span>
  </div>
  <input className="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search" />
</div>
<div className="input-group md-form form-sm form-1 pl-0">
  <div className="input-group-prepend">
    <span className="input-group-text pink lighten-3" id="basic-text1"><i className="fa fa-search text-white" aria-hidden="true"></i></span>
  </div>
  <input className="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search" />
</div>
<div className="input-group md-form form-sm form-2 pl-0">
  <input className="form-control my-0 py-1 amber-border" type="text" placeholder="Search" aria-label="Search" />
  <div className="input-group-append">
    <span className="input-group-text amber lighten-3" id="basic-text1"><i className="fa fa-search text-grey" aria-hidden="true"></i></span>
  </div>
</div>
<div className="input-group md-form form-sm form-2 pl-0">
  <input className="form-control my-0 py-1 lime-border" type="text" placeholder="Search" aria-label="Search" />
  <div className="input-group-append">
    <span className="input-group-text lime lighten-2" id="basic-text1"><i className="fa fa-search text-grey" aria-hidden="true"></i></span>
  </div>
</div>
<div className="input-group md-form form-sm form-2 pl-0">
  <input className="form-control my-0 py-1 red-border" type="text" placeholder="Search" aria-label="Search" />
  <div className="input-group-append">
    <span className="input-group-text red lighten-3" id="basic-text1"><i className="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.

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


Search within select MDB Pro component

                
import React from 'react';
import { Container, FormInline, Button, Select, SelectInput, SelectOptions, SelectOption  } from 'mdbreact';

class SearchPagePro extends React.Component {
  constructor(props) {
    super(props);
    this.state ={
      value: "Choose your option",
    };
    this.optionClick = this.optionClick.bind(this);
    this.onClick = this.onClick.bind(this);
    this.otherDropdownsClose = this.otherDropdownsClose.bind(this);
  }

  optionClick(value) {
    if (value.constructor === Array) {
      value = value.join(', ');
    }
    this.setState({value: value});
  }

  onClick(e) {
    // check if select is multiple
    if (e.target.dataset.multiple === 'true') {
      return;
    }
    if (e.target.classList.contains('form-control')) {
      return;
    }

    if (e.target.classList.contains('select-dropdown')) {
      this.otherDropdownsClose();
      if (e.target.nextElementSibling) {
        e.target.nextElementSibling.classList.add('fadeIn');
      }
    } else {
      this.otherDropdownsClose();
    }
  }

  otherDropdownsClose() {
    let dropdowns = document.querySelectorAll('.dropdown-content');
    for (let i = 0; i < dropdowns.length; i++) {
      if (dropdowns[i].classList.contains('fadeIn')) {
        dropdowns[i].classList.remove('fadeIn');
      }
    }
  }

  componentDidMount() {
    document.addEventListener('click', this.onClick);
  }
  
  componentWillUnmount() {
    document.removeEventListener('click', this.onClick);
  }

  render() {
    return (
      <Container>
        <Select>
          <SelectInput value={this.state.value}></SelectInput>
          <SelectOptions search>
            <SelectOption disabled>Choose your option</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 1</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 2</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 3</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 4</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 5</SelectOption>
          </SelectOptions>
        </Select>
        <label>Example label</label>
      </Container>
    );
  }
}

export default SearchPagePro;
                
            

Search within multiselect MDB Pro component

                
import React from 'react';
import { Container, FormInline, Button, Navbar, NavbarBrand, Collapse, NavbarToggler, NavbarNav, NavItem, NavLink, Fa, Select, SelectInput, SelectOptions, SelectOption  } from 'mdbreact';

class SearchPagePro extends React.Component {
  constructor(props) {
    super(props);
    this.state ={
      value: "Choose your option"
    };
    this.optionClick = this.optionClick.bind(this);
    this.onClick = this.onClick.bind(this);
    this.otherDropdownsClose = this.otherDropdownsClose.bind(this);
  }

  optionClick(value) {
    if (value.constructor === Array) {
      value = value.join(', ');
    }
    this.setState({value: value});
  }

  onClick(e) {
    // check if select is multiple
    if (e.target.dataset.multiple === 'true') {
      return;
    }
    if (e.target.classList.contains('form-control')) {
      return;
    }

    if (e.target.classList.contains('select-dropdown')) {
      this.otherDropdownsClose();
      if (e.target.nextElementSibling) {
        e.target.nextElementSibling.classList.add('fadeIn');
      }
    } else {
      this.otherDropdownsClose();
    }
  }

  otherDropdownsClose() {
    let dropdowns = document.querySelectorAll('.dropdown-content');
    for (let i = 0; i < dropdowns.length; i++) {
      if (dropdowns[i].classList.contains('fadeIn')) {
        dropdowns[i].classList.remove('fadeIn');
      }
    }
  }

  componentDidMount() {
    document.addEventListener('click', this.onClick);
  }
  
  componentWillUnmount() {
    document.removeEventListener('click', this.onClick);
  }

  render() {
    return (
      <Container>
        <Select multiple>
          <SelectInput value={this.state.value}></SelectInput>
          <SelectOptions search>
            <SelectOption disabled>Choose your option</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 1</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 2</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 3</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 4</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 5</SelectOption>
          </SelectOptions>
        </Select>
        <label>Example label</label>
      </Container>
    );
  }
}

export default SearchPagePro;