Bootstrap Button GroupList

by litespeedtdf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<div class="modal fade" id="reAssignmentModal" tabindex="-1" role="dialog" aria-labelledby="reAssignmentModalTitle">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <i class="fa fa-gear fa-2x"></i> You are editing AisleBin:
        <h4 class="modal-title" style=" display: inline-block;" id="reAssignmentModalTitle"></h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="col-sm-5">
            <div class="panel panel-primary">
              <div class="panel-heading">Available Teams</div>
              <div class="panel-body">
                <div class="btn-group-vertical" role="group" aria-label="Select a number from the list.">
                  <input type="button" class="btn btn-assignment" value="One"/>
                  <button class="btn btn-assignment">Two</button>
                  <button class="btn btn-assignment">Three</button>
                  <button class="btn btn-assignment">Text</button>
                  <button class="btn btn-assignment">Success</button>
                  <button class="btn btn-assignment">This is a test</button>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-2 v-center">
            <button title="Assign" class="btn btn-default center-block add"><i class="glyphicon glyphicon-chevron-right"></i>
            </button>
            <button title="Remove Assignment" class="btn btn-default center-block remove"><i class="glyphicon glyphicon-chevron-left"></i>
            </button>
          </div>
          <div class="col-sm-5">
            <div...

CSS

/* CSS used here will be applied after bootstrap.css */

.v-center {
  min-height: 200px;
  display: flex;
  justify-content: center;
  flex-flow: column wrap;
}

body {
  background-color: #e9e9e9;
  padding-top: 70px;
}


/**** BEGIN *************************************************** NavBar Default **************************************************/

.navbar-default {
  background-color: #0d1c79;
  background-image: -moz-linear-gradient(top, #0081C2, #194D7B) !important;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0081C2), to(#194D7B)) !important;
  background-image: -webkit-linear-gradient(top, #0081C2, #194D7B) !important;
  background-image: -o-linear-gradient(top, #0081C2, #194D7B) !important;
  background-image: linear-gradient(to bottom, #0d1c79, #0081C2) !important;
  /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d1c79', endColorstr='#0081C2',GradientType=0 ); IE6-9 */
  /*border-color: #4a5fdb;*/
}

.navbar-default .navbar-brand {
  color: #ffffff;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #912731;
  background-color: #4a5fdb;
}

.navbar-default .navbar-text {
  color: #ffffff;
}

.navbar-default .navbar-nav > li > a {
  color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #0d1c79;
  background-color: #e9e9e9;
}

.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #0d1c79;
}

.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #ffffff;
}

.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #0d1c79;
  background-color: #e9e9e9;
  font-weight: bolder;
}

.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #0d1c79;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav >...

JavaScript

$('#reAssignmentModal').modal({
   keyboard: false,
   backdrop: 'static'
 });