HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        
    <div class=" col-md-4 offset-md-4">
        <select class="js-example-matcher-start form-control select2 js-select2" multiple="multiple">
                <option value="O1" data-badge=""> O ption1</option>
                <option value="O2" data-badge=""> O ption2</option>
                <option value="O3" data-badge=""> O ption3</option>
                <option value="O4" data-badge=""> O ption4</option>
                <option value="O5" data-badge=""> O ption5</option>
                <option value="O6" data-badge=""> O ption6</option>
                <option value="O7" data-badge=""> O ption7</option>
                <option value="O8" data-badge=""> O ption8</option>
                <option value="O9" data-badge=""> O ption9</option>
                <option value="O10" data-badge=""> O ption10</option>
                <option value="O11" data-badge=""> O ption11</option>
                <option value="O12" data-badge=""> O ption12</option>
                <option value="O13" data-badge=""> O ption13</option>
            </select>
            
    </div>
    
    
<script>
        $(".js-select2").select2({
            closeOnSelect : false,
            placeholder : "Placeholder",
            allowHtml: true,
            allowClear: true,
            tags: true // создает новые опции на лету
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body { 
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
}
.select2-container {
  min-width: 400px;
}
.select2-results__option {
  padding-right: 20px;
  vertical-align: middle;
}
.select2-results__option:before {
  content: "";
  display: inline-block;
  position: relative;
  height: 20px;
  width: 20px;
  border: 2px solid #e9e9e9;
  border-radius: 4px;
  background-color: #fff;
  margin-right: 20px;
  vertical-align: middle;
}
.select2-results__option[aria-selected=true]:before {
  font-family:fontAwesome;
  content: "\f00c";
  color: #fff;
  background-color: #f77750;
  border: 0;
  display: inline-block;
  padding-left: 3px;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"MULTI SELECT - SELECT 2"
Bootstrap 4.1.1 Snippet by vivekbisht109

Related: See More

Questions / Comments:

"MULTI SELECT - SELECT 2" Bootstrap 4.1.1 Snippet by vivekbisht109

Related: See More

Questions / Comments:

"MULTI SELECT - SELECT 2"
Bootstrap 4.1.1 Snippet by vivekbisht109