Search
Bootstrap Search
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
<!-- 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
Colorful always 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[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 -->
<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
Colorful always or only in the :focus
state.
<!-- Search form -->
<form class="form-inline md-form form-sm mt-0">
<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 md-form form-sm active-pink active-pink-2 mt-2">
<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 md-form form-sm active-purple active-purple-2 mt-2">
<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 md-form form-sm active-cyan active-cyan-2 mt-2">
<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 md-form form-sm">
<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 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="fa fa-search" aria-hidden="true"></i>
</form>
<!-- Search form -->
<form class="form-inline 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="fa fa-search" aria-hidden="true"></i>
</form>
<!-- Search form -->
<form class="form-inline 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="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 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 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>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 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>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>
Getting started : download & setup
Download
All the components and features are part of MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.
Click the button below to go to Download Page, where you can download MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires MDB Pro package.
Click the button below to learn more about MDBbootstrap Pro package
MDBootstrap ProTutorials
If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.
5 min Quick Start Full TutorialCompilation
To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.
Map of dependencies of SCSS files in MDBootstrap:
Legend:
'-->' means 'required'
All free and pro files require files from 'core' catalog
'none' means 'this component doesn't require anything except core files'
A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working
All PRO components require 'pro/_variables.scss' file
scss/
|
|-- core/
| |
| |-- bootstrap/
| | |-- _functions.scss
| | |-- _variables.scss
| |
| |-- _colors.scss
| |-- _global.scss
| |-- _helpers.scss
| |-- _masks.scss
| |-- _mixins.scss
| |-- _typography.scss
| |-- _variables.scss
| |-- _waves.scss
|
|-- free/
| |-- _animations-basic.scss --> none
| |-- _animations-extended.scss --> _animations-basic.scss
| |-- _buttons.scss --> none
| |-- _cards.scss --> none <_buttons.scss>
| |-- _dropdowns.scss --> none <_buttons.scss>
| |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
| |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
| |-- _pagination.scss --> none
| |-- _badges.scss --> none
| |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
| |-- _carousels.scss --> <_buttons.scss>
| |-- _forms.scss --> none
| |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
| |-- _footers.scss none <_buttons.scss> (PRO: )
| |-- _list-group.scss --> none
| |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
| |-- _depreciated.scss
|
|-- pro/
| |
| |-- picker/
| | |-- _default.scss --> none
| | |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
| | |-- _default-date.scss --> _default.scss, free/_forms.scss
| |
| |-- sections/
| | |-- _templates.scss --> _sidenav.scss
| | |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
| | |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
| | |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
| | |-- _magazine.scss --> _badges.scss
| | |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
| | |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
| |
| |-- _variables.scss
| |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
| |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
| |-- _tabs.scss --> _cards.scss
| |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
| |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
| |-- _navbars.scss --> free/_navbars.scss (PRO: )
| |-- _scrollspy.scss --> none
| |-- _lightbox.scss --> none
| |-- _chips.scss --> none
| |-- _msc.scss --> none
| |-- _forms.scss --> none
| |-- _radio.scss --> none
| |-- _checkbox.scss --> none
| |-- _material-select.scss --> none
| |-- _switch.scss --> none
| |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
| |-- _range.scss --> none
| |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
| |-- _autocomplete.scss --> free/_forms.scss
| |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
| |-- _parallax.scss --> none
| |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
| |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
| |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss
| |-- _steppers.scss --> free/_buttons.scss
| |-- _blog.scss --> none
| |-- _toasts.scss --> free/_buttons.scss
| |-- _animations.scss --> none
| |-- _charts.scss --> none
| |-- _progress.scss --> none
| |-- _scrollbar.scss --> none
| |-- _skins.scss --> none
| |-- _depreciated.scss
|
`-- _custom-skin.scss
`-- _custom-styles.scss
`-- _custom-variables.scss
`-- mdb.scss
Map of dependencies of JavaScript modules in MDBootstrap:
Legend:
'-->' means 'required'
All files require jQuery and bootstrap.js
js/
├── dist/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
├── _intro-mdb-pro.js
├── modules.js
├── src/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
└── vendor/
├── addons/
│ ├── datatables.js
│ └── datatables.min.js
├── chart.js
├── enhanced-modals.js
├── hammer.js
├── jarallax.js
├── jarallax-video.js --> vendor/jarallax.js
├── jquery.easing.js
├── jquery.easypiechart.js
├── jquery.hammer.js --> vendor/hammer.js
├── jquery.sticky.js
├── lightbox.js
├── picker-date.js --> vendor/picker.js
├── picker.js
├── picker-time.js --> vendor/picker.js
├── scrollbar.js
├── scrolling-navbar.js
├── toastr.js
├── velocity.js
├── waves.js
└── wow.js
Compilation & Customization tutorial
If you need additional help to compile your custom package, use our Compilation & Customization tutorial
Compilation & Customization tutorialIntegrations with Angular, React or Vue
Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.
About MDB Angular About MDB React About MDB Vue