---
# Feel free to add content and custom Front Matter to this file.
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults

layout: default
title: Introduction
title_tag: false
permalink: /
---

<p class="s2bs5-lead">Get started with the Select2 Bootstrap 5 theme, the look of Bootstrap 5, with the functionality of Select2.</p>

<h2 id="quick-start">Quick start</h2>
<p>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? <a href="{{ site.links.download | absolute_url }}">Head to the download & install page</a>.</p>

<h3 id="4-0">Select2 v4.0.x</h3>
<p>Copy the following <code>link</code> and <code>script</code> tags into your <code>head</code> to load Bootstrap 5, Select2 v4.0 and the Select2 Bootstrap 5 theme.</p>
<div class="simple-highlight">
    {% include clipboard.html %}
{% highlight html %}
<!-- Styles -->
<link rel="stylesheet" href="{{ site.styles.bootstrap }}" />
<link rel="stylesheet" href="{{ site.styles.select2.old }}" />
<link rel="stylesheet" href="{{ site.styles.s2bs5.ltr }}" />
<!-- Or for RTL support -->
<link rel="stylesheet" href="{{ site.styles.s2bs5.rtl }}" />

<!-- Scripts -->
<script src="{{ site.scripts.jquery }}"></script>
<script src="{{ site.scripts.bootstrap }}"></script>
<script src="{{ site.scripts.select2.old }}"></script>
{% endhighlight %}
</div>

<h3 id="4-1">Select2 v4.1.x</h3>
<p>Copy the following <code>link</code> and <code>script</code> tags into your <code>head</code> to load Bootstrap 5, Select2 v4.1 and the Select2 Bootstrap 5 theme.</p>
<div class="simple-highlight">
    {% include clipboard.html %}
{% highlight html %}
<!-- Styles -->
<link rel="stylesheet" href="{{ site.styles.bootstrap }}" />
<link rel="stylesheet" href="{{ site.styles.select2.new }}" />
<link rel="stylesheet" href="{{ site.styles.s2bs5.ltr }}" />
<!-- Or for RTL support -->
<link rel="stylesheet" href="{{ site.styles.s2bs5.rtl }}" />

<!-- Scripts -->
<script src="{{ site.scripts.jquery }}"></script>
<script src="{{ site.scripts.bootstrap }}"></script>
<script src="{{ site.scripts.select2.new }}"></script>
{% endhighlight %}
</div>

<h3 id="initialise-select2">Initialise Select2</h3>
<p>Once the necessary styles and scripts are imported, Select2 can be initialised with the Select2 Bootstrap 5 theme. Simply set the <code>theme</code> parameter to <code>bootstrap-5</code> as seen below.</p>
<div class="simple-highlight">
    {% include clipboard.html %}
{% highlight js %}
$( '#select-field' ).select2( {
    theme: 'bootstrap-5'
} );
{% endhighlight %}
</div>

<h2 id="browsers-devices">Browsers & devices</h2>
<p>The Select2 Bootstrap 5 theme uses the same <code>.browserlistrc</code> 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 <a href="https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/" target="_blank" rel="noopener noreferrer">Browsers and devices page in the Bootstrap 5 docs</a>.</p>

<h2 id="accessibility">Accessibility</h2>
<p>This Select2 theme is designed as much as possible to fit in with the accessibility features and limitations <a href="https://getbootstrap.com/docs/5.0/getting-started/accessibility/" target="_blank" rel="noopener noreferrer">detailed by Bootstrap 5</a>. This includes the guidance on color contrast and visually hidden content.</p>