Introduction
Get started with the Select2 Bootstrap 5 theme, the look of Bootstrap 5, with the functionality of Select2.
Quick start
Looking to quickly get started adding the Select2 Bootstrap 5 theme to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? Head to the download & install page.
Select2 v4.0.x
Copy the following link and script tags into your head to load Bootstrap 5, Select2 v4.0 and the Select2 Bootstrap 5 theme.
<!-- 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
Copy the following link and script tags into your head to load Bootstrap 5, Select2 v4.1 and the Select2 Bootstrap 5 theme.
<!-- 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>Initialise Select2
Once the necessary styles and scripts are imported, Select2 can be initialised with the Select2 Bootstrap 5 theme. Simply set the theme parameter to bootstrap-5 as seen below.
$( '#select-field' ).select2( {
theme: 'bootstrap-5'
} );Browsers & devices
The Select2 Bootstrap 5 theme uses the same .browserlistrc specification that Bootstrap 5 uses, to ensure thorough compatibility between the browsers & devices supported by Bootstrap 5 and those supported by the Select2 Bootstrap 5 theme. For more information about what browsers and devices are supported, visit the Browsers and devices page in the Bootstrap 5 docs.
Accessibility
This Select2 theme is designed as much as possible to fit in with the accessibility features and limitations detailed by Bootstrap 5. This includes the guidance on color contrast and visually hidden content.