--- layout: default title: Basic usage title_tag: true permalink: /getting-started/basic-usage/ --- {% assign field_name = "basic-usage" %} {% capture example_html %} {% endcapture %} {% capture example_js %} $( '#{{ field_name }}' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); {% endcapture %} {% include example.html %}
There are 2 versions of Select2 which changed some options. The Select2 Bootstrap 5 theme supports both 4.0.x and 4.1.x-rc.x. Which version of Select2 you use will change some of the usage for the Select2 Bootstrap 5 theme.
There are 2 ways to set the sizing of the Select2 element; using Select2 options, or using Bootstrap 5 classes and Select2 options. Between 4.0.x and 4.1.x-rc.x, Select2 changed the option name for adding classes to the main element (the one you see before opening the dropdown) from containerCssClass
to selectionCssClass
. See below for an example