Select2 v4 theme for Bootstrap4

  • By Takashi Kanemoto
  • Last update: Jan 3, 2023
  • Comments: 16

select2-bootstrap4-theme

npm version npm Packagist Version Packagist Downloads

Select2 v4 theme for Bootstrap4 (Compatible to boostrap 4.0.0+)

Live demo

👉 https://ttskch.github.io/select2-bootstrap4-theme/

Installation

CDN

<link rel="stylesheet" href="/path/to/select2.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/[email protected]/dist/select2-bootstrap4.min.css">

Manually

# npm
$ npm install @ttskch/select2-bootstrap4-theme

# yarn
$ yarn add @ttskch/select2-bootstrap4-theme

# composer
$ composer require ttskch/select2-bootstrap4-theme
<link rel="stylesheet" href="/path/to/select2.css">
<link rel="stylesheet" href="/path/to/select2-bootstrap4.min.css">

Usage

$('select').select2({
    theme: 'bootstrap4',
});

Getting involved

  1. Fix src/_layout.scss, src/_single.scss or src/_multiple.scss
  2. Do npm run build:both
  3. Send me a Pull Request

You can use docs dir for your development.

  1. Do npm run prepare (this creates symlink to dist/select2-bootstrap4.css onto docs)
  2. Serve docs with your local web server (e.g. php -S localhost:8888 -t docs)
  3. Do npm run watch
  4. Tweak scss and browse demo page on your browser

Github

https://github.com/ttskch/select2-bootstrap4-theme

Comments(16)

  • 1

    Improve style

    Contains changes (some are opinionated) for better integration with Bootstrap 4

    Add stylelint

    • Same configuration as Boostrap
    • Allows BEM-like selectors
    • Some rules have been disabled ad-hoc

    Move layout to its own partial

    Allow users to customize individual components or to use just one of them (e.g., "single" and "layout" when "multiple" is not needed)

    Improve single component

    • Lint style
    • Use $input-color to match Bootstrap
    • Use $input-padding-x to match Bootstrap
    • Use $input-placeholder-color to match Bootstrap

    Improve multiple component

    • Lint style
    • Use $input-padding-x to match Bootstrap
    • Use $input-color to match Bootstrap

    Improve layout partial

    • Lint style
    • Use border-bottom-radius mixin
    • Fix border radius on open containers
    • Use color-yiq mixin to pick the correct color in highlighted choice
    • Use $input-padding-y and $input-padding-x
    • Use $input-bg as base color to darken for selected choice

    Fix cursor on disabled elements

    Reproducible with Chrome 88 on macOS

    Before

    image

    After

    image

  • 2

    Bootstrap variable file should not be introduced in layout.css

    If I use gulp-sass instead of sass-loader to compile SCSS source code, I will not be able to proceed.

    I think it is better to add in webpack.config.js:

    {
    loader: 'sass-loader',
    options: {
        prependData: `
            @import "~bootstrap/scss/functions";
            @import "~bootstrap/scss/variables";
            @import "~bootstrap/scss/mixins";
        `
    }
}
  • 3

    Clear button x is not centered.

    /* Fix for select2-bootstrap4-theme clear buttons on dropdowns */
.select2-container--bootstrap4 .select2-selection__clear {
    line-height: .95em;
    padding-left: 0.26em;
}
  • 4

    Styling of dropdown icon does not match BS4 default

    The icon is a down triangle instead of a down chevron... I tweaked your demo page using the browser console to show the problem: https://jsfiddle.net/t2prb6ds/

  • 5

    Use custom-select-% variable instead of input

    is there a reason why this package uses the input field variable instead of the custom-select-% variables?

    https://github.com/twbs/bootstrap/blob/7a6da5e3e7ad7c749dde806546a35d4d4259d965/scss/_variables.scss#L575

    I had a custom drop-down indicator on my normal select fields but when I installed this package, I lost that customization. Looking through your source code, it doesnt look like any of these variables are used.

    Is there a particular reason for this?

  • 6

    Get the primary theme colour properly

    Using the bootstrap function to get the theme colour means that the source can be used by people who have overridden the primary theme colour by setting it in $theme-colours as per bootstrap docs

    https://getbootstrap.com/docs/4.5/getting-started/theming/#modify-map

    Fixes #46

  • 7

    Code proposal for "border-radius"

    If in the Bootstrap variable file we disable the rounded border, the theme does not reflect this option. https://github.com/ttskch/select2-bootstrap4-theme/issues/38#issue-509434475

  • 8

    Prepend multiselect breaks when you go onto a second line.

    As seen in the image below when you have a multi select and a prepend, if your selects go onto a second line it causes the entire box to drop onto the next line instead of growing on the same line.

    image

    <!DOCTYPE html>
<html>
<head>
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- select2 -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

  <!-- select2-bootstrap4-theme -->
  <link href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css" rel="stylesheet"> <!-- for live demo page -->
  <link href="select2-bootstrap4.css" rel="stylesheet"> <!-- for local development env -->
</head>

<body class="pt-5" style="min-height:90vh">

<div class="container">
  <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" target="_blank">@ttskch/select2-bootstrap4-theme</a></h3>
  <hr>

  <form>
    <div class="form-group">
      <label>Example of multiple select</label>
          <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">Prepend</span>
      </div>
      <select multiple placeholder="Choose anything" data-allow-clear="1">
        <option>1fvfvfvffv</option>
        <option>2</option>
        <option>fvfvfvffvf3</option>
        <option>vfvfvvfvvf4</option>
        <option>5vfvfvffvff</option>
        <option>5vfvfvffvff</option>
        <option>5vfvfvffvff</option>
        <option>5vfvfvffvff</option>
        <option>5vfvfvffvff</option>
        <option>5vfvfvffvff</option>
        <option>5vfvfvffvff</option>
      </select>
    </div>
  </div>

  </form>
</div>

<!-- bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
<!-- select2-bootstrap4-theme -->
$(function () {
  $('select').each(function () {
    $(this).select2({
      theme: 'bootstrap4',
      width: 'style',
      placeholder: $(this).attr('placeholder'),
      allowClear: Boolean($(this).data('allow-clear')),
    });
  });
});
</script>
</body>
</html>
  • 9

    Match style of text input box a bit more

    • Add a background to ensure it’s readable if placed on a dark background
    • Use border-radius/box-shadow/transition mixins

    The unrelated height calc changes are due to https://github.com/twbs/bootstrap/commit/51375abca5769682f1d27de2e29e6e9f15ec7314#diff-d8ee409a461718bfb6240710c8c73382L491

  • 10

    Fix form-control layout

    The input field does not use the full size of the fieldset, with this change it fits the column fully. Also the select2 option "width" must be set to "style", otherwise the calculation makes it go beyond the fieldset.

  • 11

    BS Theme not working on js-example-tags

    The theme doesn't seem to be working on the tags element. This is the code I am using below. But the image shows the differance between the Select2 field and the BS4 field

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.css" rel="stylesheet" />
<link rel="stylesheet" href="../css/select2-bootstrap4.css" type="text/css" />

    <select class="form-control js-example-tags" name="caller" autofocus>
<option></option>
<option>Other</option>
<option>Pit Lane</option>
</select>

    $('select').select2({
theme: 'bootstrap4',
});

$(".js-example-tags").select2({
tags: true
});

    image

  • 12

    Deprecation warnings

    The sass builder gives deprecation warnings when building this package. I fixed these warnings, but node-sass doesn't compile the code anymore. Since node-sass is deprecated (https://www.npmjs.com/package/node-sass), I swapped it out for sass. This changed a lot of lines in the dist directory, but these are all just curly brackets that are placed on it's own line.

  • 13

    Deprecation Warnings

    When running npm build on a repository that depends on this, I get a lot of deprecation warnings due to SCSS that does math without encompassing it in the calc() function. Is a fix for this in the works? If not I would be happy to work on one and make a PR when I have the time, just let me know! :)

  • 14

    Fix search field background color.

    Fix select2-search__field background color by changing to transparent like default and classic themes.

    Currently when the Bootstrap's $input-bg variable isn't white, the search field still white and looks like this: image

  • 15

    Invalid layout on multiple select and input-group

    When using select2 with multi select, input-group and the total length of items is smaller than the form group, the prepend and append groups are aligned correctly:

    layout_valid

    But if more items are added, the prepend and append groups move to a new line:

    layout_invalid

  • 16

    Select2 Multiple Tagging Support

    Is this theme support for select2 multiple tagging?

    The default style is like this: image

    But when I applied the theme:

    $('.tagging').select2({theme: 'bootstrap4', tags: true});

    The style is ugly:

    image

    Is there any instruction for this or it's not available?

Popular Tag

Related