CODEWITHSUNDEEP
twitter-bootstrapjquery-select2
Victor
Victor

Reputation: 5353

Select2 4.0.0 Bootstrap theme

In select2 4.0 version there is a theme option. However in the documentation I can't find what does the option mean and how can I create custom theme (https://select2.github.io/examples.html)

I've found bootstrap 3 theme for select2, but it seems to be working only for 3.5 version.

So I could I create custom theme for select2 latest version (4.0)? Basically I need bootstrap 3 styling preferably with LESS file

Upvotes: 9

Views: 45611

Answers (5)

Haus Coding
Haus Coding

Reputation: 1

Select2 Plugin:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

HTML:
<select id="id_user" class="custom-select select2 basic-single" name="id_user">
     <option value="1">Dummy 1</option>
     <option value="2">Dummy 2</option>
     <option value="3">Dummy 3</option>
     <option value="4">Dummy 4</option>
</select>

// create your own script css
CSS:
.select2 {
  display: block!important;
  width: 100%!important;
  height: calc(1.5em + 0.75rem + 2px)!important;
  padding: 0.375rem 0.75rem!important;
  font-size: 1rem!important;
  font-weight: 400!important;
  line-height: 1.5!important;
  color: #495057!important;
  background-color: #fff!important;
  background-clip: padding-box!important;
  border: 1px solid #ced4da!important;
  border-radius: 0.25rem!important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out!important;
}

.select2 span {
  border: none!important;
  margin: 0!important;
  padding: 0!important;
}

// create your own script js
JS:
$(document).ready(function() {
    $('.basic-single').select2();
});

Upvotes: 0

Vikas Kandari
Vikas Kandari

Reputation: 1851

There is a officially supported theme for bootstrap 4 available also mentioned in official select2 website

Git Repo of Theme

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

Live Demo

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

Installing using CLI

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

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

# composer
$ composer require ttskch/select2-bootstrap4-theme

CDN

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

Official Website

https://select2.org/

enter image description here

Upvotes: 3

TheLastCodeBender
TheLastCodeBender

Reputation: 558

You can also try this example from https://codepen.io/riyos94/pen/VyBdBz/

<html>
  <head>
    <title>Using Select2</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Select2 CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
  </head>
  <body>
    <div class="jumbotron">
      <div class="container bg-danger">
        <div class="col-md-6">
          <label>Single Select2</label>
          <select id="single" class="js-states form-control">
            <option>Java</option>
            <option>Javascript</option>
            <option>PHP</option>
            <option>Visual Basic</option>
          </select>
        </div>
        <div class="col-md-6">
          <label>Multiple Select2</label>
          <select id="multiple" class="js-states form-control" multiple>
            <option>Java</option>
            <option>Javascript</option>
            <option>PHP</option>
            <option>Visual Basic</option>
          </select>
        </div>
      </div>
    </div>
    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Select2 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script>
      $("#single").select2({
          placeholder: "Select a programming language",
          allowClear: true
      });
      $("#multiple").select2({
          placeholder: "Select a programming language",
          allowClear: true
      });
    </script>
  </body>
</html>

Upvotes: 0

sr9yar
sr9yar

Reputation: 5320

If you want to use bootstrap styling from Kevin Brown' answer

https://github.com/select2/select2-bootstrap-theme

You add this css file to your page, keep the default select2 styles

<link href="/select2-bootstrap-theme/select2-bootstrap.min.css" type="text/css" rel="stylesheet" />

Then set the theme

$("#elem").select2({theme:"bootstrap"});

Also, use classes .select2-bootstrap-prepend and .select2-bootstrap-append on the .input-group wrapper elements to group buttons and selects seamlessly.

Upvotes: 6

Kevin Brown-Silva
Kevin Brown-Silva

Reputation: 41699

@fk is working on a Bootstrap 3 theme for Select2 4.0.0.

https://github.com/select2/select2-bootstrap-theme

There is not currently any documentation on creating themes for Select2 4.0.0, but it may help to look at the default theme's SCSS for the selectors.

Upvotes: 11

Related Questions