Rate this docs

Vue Bootstrap Search

Vue Search - Bootstrap 4 & Material Design

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



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

          

            import { mdbInput } from 'mdbvue';

            export default {
              name:'mdbSearchEcample',
              components: {
                mdbInput
              }
            };

          


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

          

Search with colorful border



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

          

            import { mdbInput } from 'mdbvue';

            export default {
              name:'mdbSearchEcample',
              components: {
                mdbInput
              }
            };

          

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


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

          

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

Search with icon



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


            <!-- Search form -->
            <form class="form-inline">
              <i class="fa 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="fa 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="fa 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="fa 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="fa 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="fa 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="fa 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="fa 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="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>

      


          .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 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">
                  <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 color="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="unique" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
                </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="aqua" 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 color="warning" 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="unique" rounded size="sm" type="submit" class="mr-auto">Search</mdb-btn>
                </form>

          

            import { mdbInput, mdbBtn, mdbFormInline } from 'mdbvue';

            export default {
              name:'mdbSearchEcample',
              components: {
                mdbInput,
                mdbBtn,
                mdbFormInline
              }
            };

          


Search within select MDB Pro component



            <mdb-select search :options="[
              {value: null, text: 'Choose your option', disabled: true, selected: true},
              {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'}
            ]" />

          

            import { mdbSelect } from 'mdbvue';

            export default {
              name:'mdbSearchEcample',
              components: {
                mdbSelect
              }
            };

          

Search within multiselect MDB Pro component



        <mdb-select multiple selectAll search :options="[
          {value: null, text: 'Choose your country', disabled: true, selected: true},
          {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'}
        ]" />

      

        import { mdbSelect } from 'mdbvue';

        export default {
          name:'mdbSearchEcample',
          components: {
            mdbSelect
          }
        };