Vue Bootstrap Search

Vue Search - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

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.

Show code

template
script

        
            
          <template>
            <mdb-input label="Search" type="text" class="mt-0" />
          </template>

        
             <script>
            import {
              mdbInput
            } from 'mdbvue';
            export default {
              name: 'mdbSearchEcample',
              components: {
                mdbInput
              }
            }
          </script>

Show code

template

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

Search with colorful border

Show code

template
script
style

        
            
          <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>

Show code

template
script
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

Show code

template
script
style

        
            
          <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>

Show code

template
script
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

Show code

template
script
style

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

Show code

template
script

        
            
        <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 navbar

Show code

template
script

        
            
      <template>
        <div>
          <mdb-navbar dark class="indigo">
            <mdb-navbar-brand href="#">Navbar</mdb-navbar-brand>
            <mdb-navbar-toggler>
              <mdb-navbar-nav right>
                <mdb-form-inline class="ml-auto">
                  <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                  <mdb-btn size="sm" type="submit" class="mr-auto" outline="white">Search</mdb-btn>
                </mdb-form-inline>
              </mdb-navbar-nav>
            </mdb-navbar-toggler>
          </mdb-navbar>
          <br />
          <mdb-navbar class="blue-grey lighten-5">
            <mdb-navbar-brand href="#">Navbar</mdb-navbar-brand>
            <mdb-navbar-toggler>
              <mdb-navbar-nav>
                <mdb-nav-item active>Home</mdb-nav-item>
                <mdb-nav-item>Features</mdb-nav-item>
                <mdb-nav-item>Pricing</mdb-nav-item>
                <!-- Dropdown -->
                <mdb-dropdown tag="li" class="nav-item">
                  <mdb-dropdown-toggle slot="toggle" tag="a" navLink color="blue-gray" waves-fixed>Dropdown
                  </mdb-dropdown-toggle>
                  <mdb-dropdown-menu>
                    <mdb-dropdown-item>Action</mdb-dropdown-item>
                    <mdb-dropdown-item>Another action</mdb-dropdown-item>
                    <mdb-dropdown-item>Something else here</mdb-dropdown-item>
                  </mdb-dropdown-menu>
                </mdb-dropdown>
              </mdb-navbar-nav>
              <mdb-navbar-nav right>
                <mdb-form-inline class="ml-auto">
                  <mdb-input class="mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                </mdb-form-inline>
              </mdb-navbar-nav>
            </mdb-navbar-toggler>
          </mdb-navbar>
          <br />
          <mdb-navbar dark class="teal lighten-2">
            <mdb-navbar-brand href="#">Navbar</mdb-navbar-brand>
            <mdb-navbar-toggler>
              <mdb-navbar-nav right>
                <mdb-form-inline class="ml-auto">
                  <mdb-input class="mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                </mdb-form-inline>
              </mdb-navbar-nav>
            </mdb-navbar-toggler>
          </mdb-navbar>
          <br />
          <mdb-navbar dark class="pink lighten-3" href="#/">
            <mdb-navbar-toggler>
              <mdb-navbar-nav>
                <mdb-form-inline class="ml-auto">
                  <mdb-input class="mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                  <mdb-icon icon="search" class="white-text" />
                </mdb-form-inline>
              </mdb-navbar-nav>
            </mdb-navbar-toggler>
            <mdb-navbar-brand style="order: 3" href="#">Navbar</mdb-navbar-brand>
          </mdb-navbar>
          <br />
          <mdb-navbar dark class="blue lighten-3" href="#/">
            <mdb-navbar-toggler>
              <mdb-navbar-nav>
                <mdb-form-inline class="ml-auto">
                  <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                  <mdb-btn color="mdb-color" rounded size="sm" class="mr-auto">Search</mdb-btn>
                </mdb-form-inline>
              </mdb-navbar-nav>
            </mdb-navbar-toggler>
            <mdb-navbar-brand style="order: 3" href="#">Navbar</mdb-navbar-brand>
          </mdb-navbar>
        </div>
      </template>

        
             <script>
        import {
          mdbInput,
          mdbBtn,
          mdbNavbar,
          mdbNavbarBrand,
          mdbNavbarToggler,
          mdbNavbarNav,
          mdbFormInline,
          mdbNavItem,
          mdbDropdown,
          mdbDropdownToggle,
          mdbNavbarMenu,
          mdbDropdownItem,
          mdbIcon
        } from 'mdbvue';
        export default {
          components: {
            mdbInput,
            mdbBtn,
            mdbNavbar,
            mdbNavbarBrand,
            mdbNavbarToggler,
            mdbNavbarNav,
            mdbFormInline,
            mdbNavItem,
            mdbDropdown,
            mdbDropdownToggle,
            mdbNavbarMenu,
            mdbDropdownItem,
            mdbIcon
          }
        }
      </script>

Search within select MDB Pro component

Example label

Show code

template
script

        
            
        <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

Example label

Show code

template
script

        
            
        <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>