PHPackages                             apalfrey/select2-bootstrap-5-theme - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. apalfrey/select2-bootstrap-5-theme

AbandonedArchivedLibrary[Utility & Helpers](/categories/utility)

apalfrey/select2-bootstrap-5-theme
==================================

Select2 theme for Bootstrap 5

1.3.0(4y ago)221157.7k↓49.8%54[20 issues](https://github.com/apalfrey/select2-bootstrap-5-theme/issues)[5 PRs](https://github.com/apalfrey/select2-bootstrap-5-theme/pulls)1MITSCSS

Since Mar 5Pushed 1y ago1 watchersCompare

[ Source](https://github.com/apalfrey/select2-bootstrap-5-theme)[ Packagist](https://packagist.org/packages/apalfrey/select2-bootstrap-5-theme)[ Docs](https://github.com/apalfrey/select2-bootstrap-5-theme)[ RSS](/packages/apalfrey-select2-bootstrap-5-theme/feed)WikiDiscussions master Synced 3d ago

READMEChangelog (7)DependenciesVersions (7)Used By (1)

Select2 Bootstrap 5 Theme
=========================

[](#select2-bootstrap-5-theme)

[![GitHub](https://camo.githubusercontent.com/3fbb09920de8be018506ed57630b9f2210902e9d98f17ac72796e2fa078e8a1a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6170616c667265792f73656c656374322d626f6f7473747261702d352d7468656d653f7374796c653d666c61742d737175617265)](https://github.com/apalfrey/select2-bootstrap-5-theme)[![npm](https://camo.githubusercontent.com/f4604f9ab4e7cabd1f1da4aa6c63916f4300eacf7cbb9a4a56389e514c84049e/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f73656c656374322d626f6f7473747261702d352d7468656d653f7374796c653d666c61742d737175617265)](https://www.npmjs.com/package/select2-bootstrap-5-theme)[![Packagist Version](https://camo.githubusercontent.com/d3f5765152573aade2cae41a11e5bda42f6512c3e4160d3b25defc15d4a283e9/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6170616c667265792f73656c656374322d626f6f7473747261702d352d7468656d653f7374796c653d666c61742d737175617265)](https://packagist.org/packages/apalfrey/select2-bootstrap-5-theme)[![License](https://camo.githubusercontent.com/9f230fa05573e161831977e5c76a128279718030847744e9562449481fcf4d0e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6170616c667265792f73656c656374322d626f6f7473747261702d352d7468656d653f7374796c653d666c61742d737175617265)](LICENSE)

[Select2](https://github.com/select2/select2) v4 theme for Bootstrap 5, inspired by [select2-bootstrap4-theme](https://github.com/ttskch/select2-bootstrap4-theme)

**Works with Select2 v4.0 and v4.1**

Docs
----

[](#docs)

Installation
------------

[](#installation)

### CDN

[](#cdn)

#### Select2 v4.0

[](#select2-v40)

```

```

#### Select2 v4.1

[](#select2-v41)

```

```

### Package Managers

[](#package-managers)

```
# npm
$ npm install select2-bootstrap-5-theme

# yarn
$ yarn add select2-bootstrap-5-theme

# composer
$ composer require apalfrey/select2-bootstrap-5-theme
```

#### HTML

[](#html)

```

```

#### SCSS

[](#scss)

```
@import "node_modules/select2/src/scss/core";
// If you need to import Bootstrap as well:
@import "node_modules/select2-bootstrap-5-theme/src/select2-bootstrap-5-theme";
// Or if you have already imported Bootstrap:
@import "node_modules/select2-bootstrap-5-theme/src/include-all";
```

Usage
-----

[](#usage)

```
// Basic
$("select").select2({
    theme: "bootstrap-5",
});

// Small using Select2 properties
$("#form-select-sm").select2({
    theme: "bootstrap-5",
    containerCssClass: "select2--small", // For Select2 v4.0
    selectionCssClass: "select2--small", // For Select2 v4.1
    dropdownCssClass: "select2--small",
});

// Small using Bootstrap 5 classes
$("#form-select-sm").select2({
    theme: "bootstrap-5",
    dropdownParent: $("#form-select-sm").parent(), // Required for dropdown styling
});

// Large using Select2 properties
$("select").select2({
    theme: "bootstrap-5",
    containerCssClass: "select2--large", // For Select2 v4.0
    selectionCssClass: "select2--large", // For Select2 v4.1
    dropdownCssClass: "select2--large",
});

// Large using Bootstrap 5 classes
$("#form-select-lg").select2({
    theme: "bootstrap-5",
    dropdownParent: $("#form-select-lg").parent(), // Required for dropdown styling
});
```

Build tools
-----------

[](#build-tools)

This repo uses Gulp to compile the assets, see below for the included npm scripts and Gulp tasks and what they do;

npm scriptGulp taskDescription`start``default`Cleans the `dist` directory, lints the SCSS, compiles the dev and min versions and starts watching the SCSS for changes`start:full`N/ACleans, lints, compiles and watches the SCSS (theme & docs) and serves the docs for development`clean``clean`Cleans the `dist` directory, removing the directory and it's contents`lint``lint`Lints the SCSS files using [Stylelint](https://stylelint.io/), see [.stylelintrc](.stylelintrc) and [stylelint-config-twbs-bootstrap](https://github.com/twbs/stylelint-config-twbs-bootstrap) for linting rules`compile``compile`Cleans the `dist` directory, lints the SCSS, compiles the LTR and RTL dev and min versions. Does the same for the docs`compile:main``compile:main`Compiles all LTR versions`compile:rtl``compile:rtl`Compiles all RTL versions`watch``watch`Watches all files in `src`, compiling the SCSS when changes are detected`docs``docs`Cleans the `docs/assets/css` directory, lints the docs SCSS, compiles the docsSCSS and starts watching the docs SCSS for changes`docs:clean``docs:clean`Cleans the `docs/assets/css` directory, removing the directory and it's contents`docs:lint``docs:lint`Lints the docs SCSS files using [Stylelint](https://stylelint.io/), see [.stylelintrc](.stylelintrc) and [stylelint-config-twbs-bootstrap](https://github.com/twbs/stylelint-config-twbs-bootstrap) for linting rules`docs:compile``docs:compile`Cleans the `docs/assets/css` directory, lints the docs SCSS and compiles the LTR and RTL versions`docs:compile:main``docs:compile:main`Compiles the LTR version of the docs SCSS`docs:compile:rtl``docs:compile:rtl`Compiles the RTL version of the docs SCSS`docs:watch``docs:watch`Watches all files in docs/\_sass, compiling the SCSS when changes are detected`docs:build`N/ABuilds the docs using Jekyll`docs:serve`N/AServes the docs using Jekyll for developmentContributing
------------

[](#contributing)

If you have ideas for improvements or changes, feel free to submit an [issue](https://github.com/apalfrey/select2-bootstrap-5-theme/issues/new), or if you have changes you'd like in the project, feel free to [submit a pull request](https://github.com/apalfrey/select2-bootstrap-5-theme/compare). Make sure you run `gulp compile` or `npm run compile` before submitting a pull request to ensure the styles are compiled.

[Find out more about contributing here](https://apalfrey.github.io/select2-bootstrap-5-theme/about/contributing/)

License
-------

[](#license)

```
MIT License

Copyright (c) 2022 Andrew Palfrey

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

```

###  Health Score

42

—

FairBetter than 88% of packages

Maintenance25

Infrequent updates — may be unmaintained

Popularity52

Moderate usage in the ecosystem

Community22

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 91.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~107 days

Total

5

Last Release

1519d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/9feed51e3e8721770ad2e76ba32834efe5504622c974e398e0ee2725b7bd0259?d=identicon)[f1mishutka](/maintainers/f1mishutka)

---

Top Contributors

[![apalfrey](https://avatars.githubusercontent.com/u/10856428?v=4)](https://github.com/apalfrey "apalfrey (158 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (6 commits)")[![f1mishutka](https://avatars.githubusercontent.com/u/24731190?v=4)](https://github.com/f1mishutka "f1mishutka (5 commits)")[![tomsommer](https://avatars.githubusercontent.com/u/149171?v=4)](https://github.com/tomsommer "tomsommer (2 commits)")[![Pixelshaped](https://avatars.githubusercontent.com/u/4948753?v=4)](https://github.com/Pixelshaped "Pixelshaped (1 commits)")[![Sir-Will](https://avatars.githubusercontent.com/u/5961995?v=4)](https://github.com/Sir-Will "Sir-Will (1 commits)")

---

Tags

bootstrapbootstrap5cssscssselect2cssscssthemebootstrapselect2bootstrap5bootstrap-5

### Embed Badge

![Health badge](/badges/apalfrey-select2-bootstrap-5-theme/health.svg)

```
[![Health](https://phpackages.com/badges/apalfrey-select2-bootstrap-5-theme/health.svg)](https://phpackages.com/packages/apalfrey-select2-bootstrap-5-theme)
```

###  Alternatives

[ttskch/select2-bootstrap4-theme

Select2 v4 theme for Bootstrap4

43525.7k2](/packages/ttskch-select2-bootstrap4-theme)[twbs/bootstrap-sass

bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.

12.5k1.9M17](/packages/twbs-bootstrap-sass)[wenzhixin/bootstrap-table

An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation)

11.8k287.3k1](/packages/wenzhixin-bootstrap-table)[scssphp/scssphp

scssphp is a compiler for SCSS written in PHP.

62930.2M317](/packages/scssphp-scssphp)[onokumus/metismenu

A jQuery menu plugin

2.0k271.0k5](/packages/onokumus-metismenu)[haubek/bootstrap4c-chosen

Bootstrap 4 Component - Chosen

8176.0k](/packages/haubek-bootstrap4c-chosen)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)