Search

Bootstrap Search

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

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

Examples of Bootstrap search use:

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

You can use the Material Design version or the default Bootstrap style.


Basic example

Basic example of search form.

        
            

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

          
        
    
        
            

            <!-- Search form -->
            <input class="form-control" type="text" placeholder="Search" aria-label="Search">

          
        
    

Search with colorful border

Always colorful or only in the :focus state.

        
            


            <!-- Search form -->
            <div class="md-form active-pink active-pink-2 mb-3 mt-0">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="md-form active-purple active-purple-2 mb-3">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="md-form active-cyan active-cyan-2 mb-3">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>

            <!-- Search form -->
            <div class="md-form active-pink-2 mb-3">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="md-form active-purple-2 mb-3">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="md-form active-cyan-2 mb-3">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>

          
        
    
        
            
            .active-pink-2 input.form-control[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
            }
            .active-pink input.form-control[type=text] {
              border-bottom: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
            }
            .active-purple-2 input.form-control[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
            }
            .active-purple input.form-control[type=text] {
              border-bottom: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
            }
            .active-cyan-2 input.form-control[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #4dd0e1;
              box-shadow: 0 1px 0 0 #4dd0e1;
            }
            .active-cyan input.form-control[type=text] {
              border-bottom: 1px solid #4dd0e1;
              box-shadow: 0 1px 0 0 #4dd0e1;
            }

          
        
    
        
            

            <!-- Search form -->
            <div class="active-pink-3 active-pink-4 mb-4">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="active-purple-3 active-purple-4 mb-4">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="active-cyan-3 active-cyan-4 mb-4">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>

            <!-- Search form -->
            <div class="active-pink-4 mb-4">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="active-purple-4 mb-4">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="active-cyan-4 mb-4">
              <input class="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

Always colorful or only in the :focus state.

        
            
            <!-- Search form -->
            <form class="form-inline d-flex justify-content-center md-form form-sm mt-0">
              <i class="fas fa-search" aria-hidden="true"></i>
              <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
            </form>

            <!-- Search form -->
            <form class="form-inline d-flex justify-content-center md-form form-sm active-pink active-pink-2 mt-2">
              <i class="fas fa-search" aria-hidden="true"></i>
              <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
            </form>

            <!-- Search form -->
            <form class="form-inline d-flex justify-content-center md-form form-sm active-purple active-purple-2 mt-2">
              <i class="fas fa-search" aria-hidden="true"></i>
              <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
            </form>

            <!-- Search form -->
            <form class="form-inline d-flex justify-content-center md-form form-sm active-cyan active-cyan-2 mt-2">
              <i class="fas fa-search" aria-hidden="true"></i>
              <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
            </form>

            <!-- Search form -->
            <form class="form-inline d-flex justify-content-center md-form form-sm">
              <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
              <i class="fas fa-search" aria-hidden="true"></i>
            </form>

            <!-- Search form -->
            <form class="form-inline d-flex justify-content-center md-form form-sm active-pink-2 mt-2">
              <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
              <i class="fas fa-search" aria-hidden="true"></i>
            </form>

            <!-- Search form -->
            <form class="form-inline d-flex justify-content-center md-form form-sm active-purple-2 mt-2">
              <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
              <i class="fas fa-search" aria-hidden="true"></i>
            </form>

            <!-- Search form -->
            <form class="form-inline d-flex justify-content-center md-form form-sm active-cyan-2 mt-2">
              <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
              <i class="fas fa-search" aria-hidden="true"></i>
            </form>


          
        
    
        
            
            .active-pink-2 input.form-control[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
            }
            .active-pink input.form-control[type=text] {
              border-bottom: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
            }
            .active-purple-2 input.form-control[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
            }
            .active-purple input.form-control[type=text] {
              border-bottom: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
            }
            .active-cyan-2 input.form-control[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #4dd0e1;
              box-shadow: 0 1px 0 0 #4dd0e1;
            }
            .active-cyan input.form-control[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;
            }


          
        
    
        
            

            <!-- Search form -->
            <form class="form-inline">
              <i class="fas fa-search" aria-hidden="true"></i>
              <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
            </form>

            <!-- Search form -->
            <form class="form-inline active-pink-3 active-pink-4">
              <i class="fas fa-search" aria-hidden="true"></i>
              <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
            </form>

            <!-- Search form -->
            <form class="form-inline active-purple-3 active-purple-4">
              <i class="fas fa-search" aria-hidden="true"></i>
              <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
            </form>

            <!-- Search form -->
            <form class="form-inline active-cyan-3 active-cyan-4">
              <i class="fas fa-search" aria-hidden="true"></i>
              <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
            </form>

            <!-- Search form -->
            <form class="form-inline ">
              <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
              <i class="fas fa-search" aria-hidden="true"></i>
            </form>

            <!-- Search form -->
            <form class="form-inline active-pink-4">
              <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
              <i class="fas fa-search" aria-hidden="true"></i>
            </form>

            <!-- Search form -->
            <form class="form-inline active-purple-4">
              <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
              <i class="fas fa-search" aria-hidden="true"></i>
            </form>

            <!-- Search form -->
            <form class="form-inline active-cyan-4">
              <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
              <i class="fas fa-search" aria-hidden="true"></i>
            </form>
          
        
    
        
            

            .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;
            }
          
        
    

Search with input group

        
            

        <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="fas 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="fas 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="fas 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="fas 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="fas 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="fas fa-search text-grey"
                aria-hidden="true"></i></span>
          </div>
        </div>

      
        
    
        
            

        .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;
        }
      
        
    

Search with buttons

Info notification

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

        
            

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

      
        
    


Search within select MDB Pro component

        
            

        <!--Blue select-->
        <select class="mdb-select md-form colorful-select dropdown-primary" searchable="Search here..">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
          <option value="4">Option 4</option>
          <option value="5">Option 5</option>
        </select>

        <label class="mdb-main-label">Example label</label>

        <select class="mdb-select" searchable="Search here..">
          <option value="1" disabled selected>Choose your option</option>
          <option value="2" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp" class="rounded-circle">
            example
            1</option>
          <option value="3" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp" class="rounded-circle">
            example
            2</option>
          <option value="4" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp" class="rounded-circle">
            example
            1</option>
        </select>

      
        
    
        
            

        // Material Select
          $('.mdb-select').materialSelect({
        });

      
        
    

Search within multiselect MDB Pro component

        
            

        <select class="mdb-select md-form colorful-select dropdown-primary" multiple searchable="Search here..">
          <option value="" disabled selected>Choose your country</option>
          <option value="1">USA</option>
          <option value="2">Germany</option>
          <option value="3">France</option>
          <option value="3">Poland</option>
          <option value="3">Japan</option>
        </select>
        <label class="mdb-main-label">Label example</label>

        <select class="mdb-select" multiple searchable="Search here..">
          <optgroup label="team 1">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </optgroup>
          <optgroup label="team 2">
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
          </optgroup>
        </select>

      
        
    
        
            

        // Material Select
          $('.mdb-select').materialSelect({
        });