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: 8 months 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.

Host: GitHub
URL: https://github.com/mdbootstrap/bootstrap-multiselects
Owner: mdbootstrap
License: other
Created: 2021-08-13T06:29:31.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2022-05-19T09:15:06.000Z (almost 4 years ago)
Last Synced: 2024-11-22T23:06:54.424Z (over 1 year ago)
Topics: bootstrap, bootstrap-multiselect, bootstrap-template, bootstrap5, dropdown, modal, multiselect, responsive, responsive-design, search, select
Language: SCSS
Homepage: https://mdbootstrap.com/docs/standard/extended/multiselect/
Size: 952 KB
Stars: 3
Watchers: 5
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

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