Transfer

1<div data-bs-transfer>
2  <div class="row">
3    <div class="col-xs-12 col-md-5">
4      <div class="it-transfer-wrapper source">
5        <div class="transfer-header">
6          <div class="form-check" aria-describedby="">
7            <input type="checkbox" id="checkbox1">
8            <label for="checkbox1">
9              <span>
10                <span class="num">
11                  6
12                </span>
13                <span> ITEMS</span>
14              </span>
15              <span class="descr">Source</span>
16            </label>
17          </div>
18        </div>
19        <div class="transfer-scroll">
20          <div class="transfer-group">
21            <div class="form-check" aria-describedby="">
22              <input type="checkbox" id="checkbox2">
23              <label for="checkbox2">
24                <span>
25                  <span>List item 1</span>
26                </span>
27              </label>
28            </div>
29            <div class="form-check" aria-describedby="">
30              <input type="checkbox" id="checkbox3">
31              <label for="checkbox3">
32                <span>
33                  <span>List item 2</span>
34                </span>
35              </label>
36            </div>
37            <div class="form-check" aria-describedby="">
38              <input type="checkbox" id="checkbox4">
39              <label for="checkbox4">
40                <span>
41                  <span>List item 3</span>
42                </span>
43              </label>
44            </div>
45            <div class="form-check" aria-describedby="">
46              <input type="checkbox" id="checkbox5">
47              <label for="checkbox5">
48                <span>
49                  <span>List item 4</span>
50                </span>
51              </label>
52            </div>
53            <div class="form-check" aria-describedby="">
54              <input type="checkbox" id="checkbox6">
55              <label for="checkbox6">
56                <span>
57                  <span>List item 5</span>
58                </span>
59              </label>
60            </div>
61            <div class="form-check" aria-describedby="">
62              <input type="checkbox" id="checkbox7">
63              <label for="checkbox7">
64                <span>
65                  <span>List item 6</span>
66                </span>
67              </label>
68            </div>
69          </div>
70        </div>
71      </div>
72    </div>
73    <div class="col-xs-12 col-md-2">
74      <!-- transfer buttons-->
75      <div class="it-transfer-buttons">
76        <a class="transfer" href="#" role="button" aria-label="Sposta avanti">
77          <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
78        </a>
79        <span class="visually-hidden">Etichetta per freccia destra</span>
80        <a class="backtransfer" href="#" role="button" aria-label="Sposta indietro">
81          <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-left"></use></svg>
82        </a>
83        <span class="visually-hidden">Etichetta for freccia sinistra</span>
84        <a class="reset" href="#" role="button" aria-label="Reset">
85          <svg class="icon"><use href="/dist/svg/sprites.svg#it-restore"></use></svg>
86        </a>
87        <span class="visually-hidden">Etichetta per icona di reset</span>
88      </div>
89    </div>
90    <div class="col-xs-12 col-md-5">
91      <div class="it-transfer-wrapper target">
92        <div class="transfer-header">
93          <div class="form-check" aria-describedby="">
94            <input type="checkbox" id="checkbox1b">
95            <label for="checkbox1b">
96              <span>
97                <span class="num">
98                  6
99                </span>
100                <span> ITEMS</span>
101              </span>
102              <span class="descr">Target</span>
103            </label>
104          </div>
105        </div>
106        <div class="transfer-scroll">
107          <div class="transfer-group">
108            <div class="form-check" aria-describedby="">
109              <input type="checkbox" id="checkbox2b">
110              <label for="checkbox2b">
111                <span>
112                  <span>List item 7</span>
113                </span>
114              </label>
115            </div>
116            <div class="form-check" aria-describedby="">
117              <input type="checkbox" id="checkbox3b">
118              <label for="checkbox3b">
119                <span>
120                  <span>List item 8</span>
121                </span>
122              </label>
123            </div>
124            <div class="form-check" aria-describedby="">
125              <input type="checkbox" id="checkbox4b">
126              <label for="checkbox4b">
127                <span>
128                  <span>List item 9</span>
129                </span>
130              </label>
131            </div>
132            <div class="form-check" aria-describedby="">
133              <input type="checkbox" id="checkbox5b">
134              <label for="checkbox5b">
135                <span>
136                  <span>List item 10</span>
137                </span>
138              </label>
139            </div>
140            <div class="form-check" aria-describedby="">
141              <input type="checkbox" id="checkbox6b">
142              <label for="checkbox6b">
143                <span>
144                  <span>List item 11</span>
145                </span>
146              </label>
147            </div>
148            <div class="form-check" aria-describedby="">
149              <input type="checkbox" id="checkbox7b">
150              <label for="checkbox7b">
151                <span>
152                  <span>List item 12</span>
153                </span>
154              </label>
155            </div>
156          </div>
157        </div>
158      </div>
159    </div>
160  </div>
161</div>