Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Bootstrap Search

Bootstrap search has a single, obvious purpose - helping your users in pinpointing piece of information that they care most about at the moment.

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)

See the following Bootstrap search example:


Basic example

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

Search with colorful border

Colorful always or only in the :focus state.

                
.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;
}
                
            
                
<!-- Search form -->
<form class="form-inline active-pink active-pink-2">
    <input class="form-control w-100" type="text" placeholder="Search" aria-label="Search">
</form>
<!-- Search form -->
<form class="form-inline active-purple active-purple-2">
    <input class="form-control w-100" type="text" placeholder="Search" aria-label="Search">
</form>
<!-- Search form -->
<form class="form-inline active-cyan active-cyan-2">
    <input class="form-control w-100" type="text" placeholder="Search" aria-label="Search">
</form>

<!-- Search form -->
<form class="form-inline active-pink-2">
    <input class="form-control w-100" type="text" placeholder="Search" aria-label="Search">
</form>
<!-- Search form -->
<form class="form-inline active-purple-2">
    <input class="form-control w-100" type="text" placeholder="Search" aria-label="Search">
</form>
<!-- Search form -->
<form class="form-inline active-cyan-2">
    <input class="form-control w-100" type="text" placeholder="Search" aria-label="Search">
</form>
                
            

Search with icon

Colorful always or only in the :focus state.

                
.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 md-form form-sm">
    <i class="fa fa-search" aria-hidden="true"></i>
    <input class="form-control w-75 ml-3" type="text" placeholder="Search" aria-label="Search">
</form>

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

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

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

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

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

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

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 class="input-group md-form form-sm form-1 pl-0">
    <span class="input-group-addon purple lighten-3" id="basic-addon1"><i class="fa fa-search text-white" aria-hidden="true"></i></span>
    <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">
    <span class="input-group-addon cyan lighten-2" id="basic-addon1"><i class="fa fa-search text-white" aria-hidden="true"></i></span>
    <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">
    <span class="input-group-addon pink lighten-3" id="basic-addon1"><i class="fa fa-search text-white" aria-hidden="true"></i></span>
    <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">
    <span class="input-group-addon amber lighten-3" id="basic-addon1"><i class="fa fa-search text-grey" aria-hidden="true"></i></span>
</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">
    <span class="input-group-addon lime lighten-2" id="basic-addon1"><i class="fa fa-search text-grey" aria-hidden="true"></i></span>
</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">
    <span class="input-group-addon red lighten-3" id="basic-addon1"><i class="fa fa-search text-grey" aria-hidden="true"></i></span>
</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.

                
<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 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>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.jpg" class="rounded-circle">example 1</option>
    <option value="3" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" class="rounded-circle">example 2</option>
    <option value="4" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" class="rounded-circle">example 1</option>
</select>
                
            

Search within multiselect MDB Pro component

                
<select class="mdb-select 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>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>