Vue Bootstrap Search

Vue Search - Bootstrap 4 & Material Design

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

Vue 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

Basic example of search form.

        
            
          <template>
            <mdb-input label="Search" type="text" class="mt-0" />
          </template>
          
        
    
        
             <script>
            import {
              mdbInput
            } from 'mdbvue';
            export default {
              name: 'mdbSearchEcample',
              components: {
                mdbInput
              }
            }
          </script>
          
        
    
        
            
          <template>
            <input class="form-control" type="text" placeholder="Search" aria-label="Search" />
          </template>

Search with colorful border 

        
            
          <template>
            <mdb-container>
              <mdb-input label="Search" type="text" class="active-pink active-pink-2 mt-0 mb-3" />
              <mdb-input label="Search" type="text" class="active-purple active-purple-2 mt-0 mb-3" />
              <mdb-input label="Search" type="text" class="active-cyan active-cyan-2 mt-0 mb-3" />
              <mdb-input label="Search" type="text" class="active-pink-2 mt-0 mb-3" />
              <mdb-input label="Search" type="text" class="active-purple-2 mt-0 mb-3" />
              <mdb-input label="Search" type="text" class="active-cyan-2 active-purple-2 mt-0 mb-3" />
            </mdb-container>
          </template>
          
        
    
        
             <script>
            import {
              mdbInput,
              mdbContainer
            } from 'mdbvue';
            export default {
              components: {
                mdbInput,
                mdbContainer
              }
            }
          </script>
          
        
    
        
             <style>
            .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 !important;
            }

            .active-purple .fa,
            .active-purple-2 .fa {
              color: #ce93d8 !important;
            }

            .active-pink .fa,
            .active-pink-2 .fa {
              color: #f48fb1 !important;
            }
          </style>
          
        
    
        
            
          <template>
            <mdb-container>
              <div class="active-pink-3 active-pink-4 mb-3">
                <input class="form-control" type="text" placeholder="Search" aria-label="Search" />
              </div>
              <div class="active-purple-3 active-purple-4 mb-3">
                <input class="form-control" type="text" placeholder="Search" aria-label="Search" />
              </div>
              <div class="active-cyan-3 active-cyan-4 mb-3">
                <input class="form-control" type="text" placeholder="Search" aria-label="Search" />
              </div>
              <div class="active-pink-4 mb-3">
                <input class="form-control" type="text" placeholder="Search" aria-label="Search" />
              </div>
              <div class="active-purple-4 mb-3">
                <input class="form-control" type="text" placeholder="Search" aria-label="Search" />
              </div>
              <div class="active-cyan-4 mb-3">
                <input class="form-control" type="text" placeholder="Search" aria-label="Search" />
              </div>
            </mdb-container>
          </template>
          
        
    
        
             <script>
            import {
              mdbContainer
            } from 'mdbvue';
            export default {
              components: {
                mdbContainer
              }
            }
          </script>
          
        
    
        
             <style>
            .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;
            }
          </style>

Search with icon 

        
            
          <template>
            <div>
              <mdb-form-inline class="md-form">
                <mdbIcon icon="search" />
                <mdb-input type="text" placeholder="Search" aria-label="Search" />
              </mdb-form-inline>
              <mdb-form-inline class="md-form active-pink active-pink-2">
                <mdbIcon icon="search" />
                <mdb-input type="text" placeholder="Search" aria-label="Search" />
              </mdb-form-inline>
              <mdb-form-inline class="md-form active-purple active-purple-2">
                <mdbIcon icon="search" />
                <mdb-input type="text" placeholder="Search" aria-label="Search" />
              </mdb-form-inline>
              <mdb-form-inline class="md-form active-cyan active-cyan-2 ">
                <mdbIcon icon="search" />
                <mdb-input type="text" placeholder="Search" aria-label="Search" />
              </mdb-form-inline>
              <mdb-form-inline class="md-form active-pink-2">
                <mdb-input type="text" placeholder="Search" aria-label="Search" />
                <mdbIcon icon="search" />
              </mdb-form-inline>
              <mdb-form-inline class="md-form active-purple-2">
                <mdb-input type="text" placeholder="Search" aria-label="Search" />
                <mdbIcon icon="search" />
              </mdb-form-inline>
              <mdb-form-inline class="md-form active-cyan-2 ">
                <mdb-input type="text" placeholder="Search" aria-label="Search" />
                <mdbIcon icon="search" />
              </mdb-form-inline>
            </div>
          </template>
          
        
    
        
             <script>
            import {
              mdbIcon,
              mdbFormInline,
              mdbInput
            } from 'mdbvue';
            export default {
              components: {
                mdbIcon,
                mdbFormInline,
                mdbInput
              }
            }
          </script>
          
        
    
        
             <style>
            .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;
            }
          </style>
          
        
    
        
            
          <template>
            <div>
              <mdb-form-inline>
                <mdbIcon icon="search" />
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              </mdb-form-inline>
              <mdb-form-inline class="active-pink active-pink-2">
                <mdbIcon icon="search" />
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              </mdb-form-inline>
              <mdb-form-inline class="active-purple active-purple-2">
                <mdbIcon icon="search" />
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              </mdb-form-inline>
              <mdb-form-inline class="active-cyan active-cyan-2 ">
                <mdbIcon icon="search" />
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              </mdb-form-inline>
              <mdb-form-inline class="active-pink-2">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <mdbIcon icon="search" />
              </mdb-form-inline>
              <mdb-form-inline class="active-purple-2">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <mdbIcon icon="search" />
              </mdb-form-inline>
              <mdb-form-inline class="active-cyan-2 ">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <mdbIcon icon="search" />
              </mdb-form-inline>
            </div>
          </template>
          
        
    
        
             <script>
            import {
              mdbIcon,
              mdbFormInline,
              mdbInput
            } from 'mdbvue';
            export default {
              components: {
                mdbIcon,
                mdbFormInline,
                mdbInput
              }
            }
          </script>
          
        
    
        
             <style>
            .active-pink-2 input[type=text]:focus:not([readonly]) {
              border: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
            }

            .active-pink input[type=text] {
              border: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
            }

            .active-purple-2 input[type=text]:focus:not([readonly]) {
              border: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
            }

            .active-purple input[type=text] {
              border: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
            }

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

            .active-cyan input[type=text] {
              border: 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;
            }
          </style>

Search with input group 

        
            
      <template>
        <div>
          <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">
                    <mdbIcon icon="search"/>
                  </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">
                    <mdbIcon icon="search"/>
                  </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">
                    <mdbIcon icon="search"/>
                  </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">
                    <mdbIcon icon="search"/>
                  </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">
                    <mdbIcon icon="search"/>
                  </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">
                    <mdbIcon icon="search"/>
                  </span>
            </div>
          </div>
        </div>
      </template>
      
        
    
        
             <script>
        import {
          mdbIcon
        } from 'mdbvue';
        export default {
          components: {
            mdbIcon
          }
        }
      </script>
      
        
    
        
             <style>
        .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;
        }
      </style>

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.

        
            
        <template>
          <div>
            <mdb-form-inline class="mr-auto mb-4">
              <mdb-input class="mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              <mdb-btn gradient="blue" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
              <mdb-input class="mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              <mdb-btn outline="success" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
              <mdb-input class="mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              <mdb-btn color="unique" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
            </mdb-form-inline>
            <mdb-form-inline class="mr-auto mb-4">
              <mdb-input class="mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              <mdb-btn gradient="aqua" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
              <mdb-input class="mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              <mdb-btn outline="warning" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
              <mdb-input class="mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              <mdb-btn color="elegant" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
            </mdb-form-inline>
            <form class="form-inline mr-auto">
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              <mdb-btn gradient="purple" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              <mdb-btn outline="danger" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              <mdb-btn color="indigo" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
            </form>
            <form class="form-inline mr-auto">
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              <mdb-btn gradient="peach" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              <mdb-btn outline="info" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              <mdb-btn color="mdb-color" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
            </form>
          </div>
        </template>
        
        
    
        
             <script>
          import {
            mdbInput,
            mdbBtn,
            mdbFormInline
          } from 'mdbvue';
          export default {
            name: 'mdbSearchEcample',
            components: {
              mdbInput,
              mdbBtn,
              mdbFormInline
            }
          }
        </script>

Search within select MDB Pro component 

        
            
        <template>
          <mdb-select search placeholder="Choose your country" :options="[
                    {value: 'Option 1', text: 'Option nr 1'},
                    {value: 'Option 2', text: 'Option nr 2'},
                    {value: 'Option 3', text: 'Option nr 3'},
                    {value: 'Option 4', text: 'Option nr 4'},
                    {value: 'Option 5', text: 'Option nr 5'}
                  ]" />
        </template>
        
        
    
        
             <script>
          import {
            mdbSelect
          } from 'mdbvue';
          export default {
            name: 'mdbSearchEcample',
            components: {
              mdbSelect
            }
          }
        </script>

Search within multiselect MDB Pro component 

        
            
        <template>
          <mdb-select multiple selectAll search placeholder="Choose your country" :options="[
                {value: 'Option 1', text: 'USA'},
                {value: 'Option 2', text: 'Germany'},
                {value: 'Option 3', text: 'France'},
                {value: 'Option 4', text: 'Poland'},
                {value: 'Option 5', text: 'Japan'}
              ]" />
        </template>
        
        
    
        
             <script>
          import {
            mdbSelect
          } from 'mdbvue';
          export default {
            name: 'mdbSearchEcample',
            components: {
              mdbSelect
            }
          }
        </script>