On this page

Download & install

Download the compiled or source code of the Select2 Bootstrap 5 theme, or include it in your package manager of choice, currently supporting npm, yarn and Composer

Compiled code

Download the pre-compiled code for the Select2 Bootstrap 5 theme and easily include it in your project. This option ONLY includes the compiled files and does not include the documentation or the source files.

Download

Source files

Download the original source files to compile it with any modifications you need. This option includes the source SCSS files, documentation and the compiled files.

We recommend checking out the build tools documentation to see how the build tools are set up for this project, along with alternatives that can be used.

Download source

CDN via jsDelivr

Include the compiled files straight from jsDelivr by copying one of the following options below directly into your project.

Select2 v4.0.x

<!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
<!-- Or for RTL support -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.rtl.min.css" />

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js"></script>

Select2 v4.1.x

<!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
<!-- Or for RTL support -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.rtl.min.css" />

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

Package managers

Include the Select2 Bootstrap 5 theme's source and compiled files directly into your project using either npm, yarn or Composer. Using the source files will require a Sass compiler as well as Autoprefixer in order to compile the code to match both the compiled files and the Bootstrap 5 compiled files. You can find more information in the build tools documentation.

You can import the source files into your project by using the following code:

@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";

Note: you will need to include the select2 package into your project as well for the above code. Alternatively, simply remove the @import "node_modules/select2/src/scss/core"; line if you're already importing select2 elsewhere.

npm

Install the Select2 Bootstrap 5 theme into your Node.js powered apps with the npm package:

npm install select2-bootstrap-5-theme

The Select2 Bootstrap 5 theme's package.json includes some additional properties under the following keys:

  • sass - path to the Select2 Bootstrap 5 theme's main Sass source file
  • style - path to the Select2 Bootstrap 5 theme's non-minified, pre-compiled CSS

yarn

Install the Select2 Bootstrap 5 theme into your Node.js powered apps with the npm package:

yarn add select2-bootstrap-5-theme

The Select2 Bootstrap 5 theme's package.json includes some additional properties under the following keys:

  • sass - path to the Select2 Bootstrap 5 theme's main Sass source file
  • style - path to the Select2 Bootstrap 5 theme's non-minified, pre-compiled CSS

Composer

Install the Select2 Bootstrap 5 theme into your Composer based projects with the Composer package:

composer require apalfrey/select2-bootstrap-5-theme

RTL support

Like Bootstrap 5, the Select2 Bootstrap 5 theme includes RTL support using the gulp version of RTLCSS. Find out more about how to use the RTL version in the Bootstrap 5 docs.