Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by André Albson

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://rawgithub.com/istvan-ujjmeszaros/bootstrap-duallistbox/master/src/jquery.bootstrap-duallistbox.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/istvan-ujjmeszaros/bootstrap-duallistbox/master/src/bootstrap-duallistbox.css">
<select multiple="multiple" size="10" name="duallistbox_demo1[]">
              <option value="option1">Option 1</option>
              <option value="option2">Option 2</option>
              <option value="option3" selected="selected">Option 3</option>
              <option value="option4">Option 4</option>
              <option value="option5">Option 5</option>
              <option value="option6" selected="selected">Option 6</option>
              <option value="option7">Option 7</option>
              <option value="option8">Option 8</option>
              <option value="option9">Option 9</option>
              <option value="option0">Option 10</option>
            </select>

CSS

.bootstrap-duallistbox-container select option:hover, 
.bootstrap-duallistbox-container select option:focus, 
.bootstrap-duallistbox-container select option:active  {
    color: #333 !important;
    background-color: #FFC894 !important;
}
select:-internal-list-box option:checked {
    color: #333 !important;
    background-color: #FFC894 !important;
}

select:-internal-list-box option:selected  {
    color: #333 !important;
    background-color: #FFC894 !important;
}

select:-internal-list-box:focus  option:checked  {
    color: #333 !important;
    background-color: #FFC894 !important;
}

select:-internal-list-box:focus  option:selected  {
    color: #333 !important;
    background-color: #FFC894 !important;
}

select:-internal-list-box:focus option::selection  {
    color: #333 !important;
    background-color: #FFC894 !important;
}

.bootstrap-duallistbox-container:focus select option::selection {
    background: #ffb7b7 !important;
}

JavaScript

var demo1 = $('select[name="duallistbox_demo1[]"]').bootstrapDualListbox();