Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="row style-select">
  <div class="col-md-6">
    <label class="control-label">Superheroes</label>
    <select multiple class="form-control" id="StaffList">
      <option value="123">Superman</option>
      <option value="456">Batman</option>
      <option value="789">Spiderman</option>
      <option value="654">Captain America</option>
    </select>
  </div>
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-3 add-btns">
        <input type="button" id="btnAvenger" value="Add Avenger" class="btn btn-default" />
      </div>
      <div class="col-md-9 col-sm-9 col-xs-9">
        <label class="control-label">Avengers</label>
        <div class="selected-left">
          <select multiple class="form-control" id="PresenterList">
            <option value="856">Iron Man</option>
          </select>
        </div>
        <div class="selected-right">
          <button type="button" class="btn btn-default btn-sm" id="btnAvengerUp">
            <span class="glyphicon glyphicon-chevron-up"></span>
          </button>
          <button type="button" class="btn btn-default btn-sm" id="btnAvengerDown">
            <span class="glyphicon glyphicon-chevron-down"></span>
          </button>
          <button type="button" class="btn btn-default btn-sm" id="btnRemoveAvenger">
            <span class="glyphicon glyphicon-remove"></span>
          </button>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-3 add-btns">
        <input type="button" id="btnShield" value="Add S.H.I.E.L.D." class="btn btn-default" />
      </div>
      <div class="col-md-9 col-sm-9 col-xs-9">
        <label class="control-label">S.H.I.E.L.D.</label>
        <div class="selected-left">
          <select multiple...

SCSS

body {
  padding: 10px;
}

#StaffList {
  height: 350px;
  margin-bottom: 10px;
}

#PresenterList,
#ContactList,
#FacilitatorList {
  height: 95px;
  margin-bottom: 10px;
}

.style-select {
  select {
    padding: 0;
    option {
      padding: 4px 10px 4px 10px;
    }
    option:hover {
      background: #EEEEEE;
    }
  }
}

.add-btns {
  padding: 0;
  input {
    margin-top: 25px;
    width: 100%;
  }
}

.selected-left {
  float: left;
  width: 88%;
}

.selected-right {
  float: left;
  button {
    display: block;
    margin-left: 4px;
    margin-bottom: 2px;
  }
}

@media (max-width:517px) {
  .selected-right {
    button {
      display: inline;
      margin-bottom: 5px;
    }
  }
}

.subject-info-box-1,
.subject-info-box-2 {
  float: left;
  width: 45%;
  select {
    height: 200px;
    padding: 0;
    option {
      padding: 4px 10px 4px 10px;
    }
    option:hover {
      background: #EEEEEE;
    }
  }
}

.subject-info-arrows {
  float: left;
  width: 10%;
  input {
    width: 70%;
    margin-bottom: 5px;
  }
}

JavaScript

/**
 *  jQuery.SelectListActions
 *  https://github.com/esausilva/jquery.selectlistactions.js
 *
 *  (c) http://esausilva.com
 */

(function($) {
  //Moves selected item(s) from sourceList to destinationList
  $.fn.moveToList = function(sourceList, destinationList) {
    var opts = $(sourceList + ' option:selected');
    if (opts.length == 0) {
      alert("Nothing to move");
    }

    $(destinationList).append($(opts).clone());
  };

  //Moves all items from sourceList to destinationList
  $.fn.moveAllToList = function(sourceList, destinationList) {
    var opts = $(sourceList + ' option');
    if (opts.length == 0) {
      alert("Nothing to move");
    }

    $(destinationList).append($(opts).clone());
  };

  //Moves selected item(s) from sourceList to destinationList and deleting the
  // selected item(s) from the source list
  $.fn.moveToListAndDelete = function(sourceList, destinationList) {
    var opts = $(sourceList + ' option:selected');
    if (opts.length == 0) {
      alert("Nothing to move");
    }

    $(opts).remove();
    $(destinationList).append($(opts).clone());
  };

  //Moves all items from sourceList to destinationList and deleting
  // all items from the source list
  $.fn.moveAllToListAndDelete = function(sourceList, destinationList) {
    var opts = $(sourceList + ' option');
    if (opts.length == 0) {
      alert("Nothing to move");
    }

    $(opts).remove();
    $(destinationList).append($(opts).clone());
  };

  //Removes selected item(s) from list
  $.fn.removeSelected = function(list) {
    var opts = $(list + ' option:selected');
    if (opts.length == 0) {
      alert("Nothing to remove");
    }

    $(opts).remove();
  };

  //Moves selected item(s) up or down in a list
  $.fn.moveUpDown = function(list, btnUp, btnDown) {
    var opts = $(list + ' option:selected');
    if (opts.length == 0) {
      alert("Nothing to move");
    }

    if (btnUp) {
      opts.first().prev().before(opts);
    } else if (btnDown) {
     ...