On this page

Sizing

Small

Select2 Options

    
<div class="mb-3">
    <select class="form-select" id="small-select2-options-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
</div>

<div class="mb-3">
    <select class="form-select" data-placeholder="Choose anything" id="small-select2-options-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
</div>

    
$( '#small-select2-options-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    selectionCssClass: 'select2--small',
    dropdownCssClass: 'select2--small',
} );

$( '#small-select2-options-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
    selectionCssClass: 'select2--small',
    dropdownCssClass: 'select2--small',
} );

Bootstrap 5 Class

    
<div class="mb-3">
    <select class="form-select form-select-sm" id="small-bootstrap-class-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
</div>

<div class="mb-3">
    <select class="form-select form-select-sm" data-placeholder="Choose anything" id="small-bootstrap-class-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
</div>

    
$( '#small-bootstrap-class-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    dropdownParent: $( '#small-bootstrap-class-single-field' ).parent(),
} );

$( '#small-bootstrap-class-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
    dropdownParent: $( '#small-bootstrap-class-multiple-field' ).parent(),
} );

Large

Select2 Options

    
<div class="mb-3">
    <select class="form-select" id="large-select2-options-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
</div>

<div class="mb-3">
    <select class="form-select" data-placeholder="Choose anything" id="large-select2-options-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
</div>

    
$( '#large-select2-options-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    selectionCssClass: 'select2--large',
    dropdownCssClass: 'select2--large',
} );

$( '#large-select2-options-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
    selectionCssClass: 'select2--large',
    dropdownCssClass: 'select2--large',
} );

Bootstrap 5 Class

    
<div class="mb-3">
    <select class="form-select form-select-lg" id="large-bootstrap-class-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
</div>

<div class="mb-3">
    <select class="form-select form-select-lg" data-placeholder="Choose anything" id="large-bootstrap-class-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
</div>

    
$( '#large-bootstrap-class-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    dropdownParent: $( '#large-bootstrap-class-single-field' ).parent(),
} );

$( '#large-bootstrap-class-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
    dropdownParent: $( '#large-bootstrap-class-multiple-field' ).parent(),
} );