Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mdbootstrap/bootstrap-multiselects

Responsive Multiselect built with the latest Bootstrap 5. Unlike a normal select, multiselect allows the user to select multiple options at once.
https://github.com/mdbootstrap/bootstrap-multiselects

bootstrap bootstrap-multiselect bootstrap-template bootstrap5 dropdown modal multiselect responsive responsive-design search select

Last synced: about 1 month ago
JSON representation

Responsive Multiselect built with the latest Bootstrap 5. Unlike a normal select, multiselect allows the user to select multiple options at once.

Awesome Lists containing this project

README 

        

Responsive Multiselect built with the latest Bootstrap 5. Unlike a normal select, multiselect allows the user to select multiple options at once.



Check out [Bootstrap Multiselect Documentation](https://mdbootstrap.com/docs/standard/extended/multiselect/) for detailed instructions & even more examples.



## Basic example



![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/basic.png)



```html



  One

  Two

  Three

  Four

  Five

  Six

  Seven

  Eight



```



## How to use?



1. Download MDB 5 - free UI KIT



2. Choose your favourite customized component and click on the image



3. Copy & paste the code into your MDB project



[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)



## More examples



[Bootstrap Multiselect with label:

![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/with-label.png)](https://mdbootstrap.com/docs/standard/extended/multiselect/?#section-select-with-label)



[Bootstrap Multiselect with placeholder:

![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/with-placeholder.png)](https://mdbootstrap.com/docs/standard/extended/multiselect/?#section-select-with-placeholder)



[Bootstrap Disabled multiselect:

![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/disabled.png)](https://mdbootstrap.com/docs/standard/extended/multiselect/?#section-disabled-select)



[Bootstrap Multiselect disabled options:

![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/disabled-options.png)](https://mdbootstrap.com/docs/standard/extended/multiselect/?#section-disabled-options)



[Bootstrap Multiselect clear button:

![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/clear.png)](https://mdbootstrap.com/docs/standard/extended/multiselect/?#section-clear-button)



[Bootstrap Multiselect custom content:

![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/custom.png)](https://mdbootstrap.com/docs/standard/extended/multiselect/?#section-custom-content)



[Bootstrap Multiselect visible options:

![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/visible.png)](https://mdbootstrap.com/docs/standard/extended/multiselect/?#section-visible-options)



[Bootstrap Multiselect secondary text:

![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/secondary.png)](https://mdbootstrap.com/docs/standard/extended/multiselect/?#section-secondary-text)



[Bootstrap Multiselect search:

![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/search.png)](https://mdbootstrap.com/docs/standard/extended/multiselect/?#section-search)



[Bootstrap Multiselect select with search inside a modal:

![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/modal.png)](https://mdbootstrap.com/docs/standard/extended/multiselect/?#section-search-inside-modal)



[Bootstrap Multiselect option groups:

![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/options.png)](https://mdbootstrap.com/docs/standard/extended/multiselect/?#section-option-groups)



[Bootstrap Multiselect with icons:

![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/icons.png)](https://mdbootstrap.com/docs/standard/extended/multiselect/?#section-icons)



[Bootstrap Multiselect validation:

![Bootstrap 5 Multiselect](https://mdbootstrap.com/img/Marketing/github/multiselect/validation.png)](https://mdbootstrap.com/docs/standard/extended/multiselect/?#section-validation)



___



## More extended Bootstrap documentation