<div class="container">
<div class="row">
  <div class="col-xs-12">
<div class="dropdown">
  <button id="dLabel" class="dropdown-select" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Select
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
  </ul>
</div>
  </div>
</div>
</div>
#dLabel {
    width: 240px;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
  border: solid 1px #cccccc;
  text-align: left;
  padding: 7.5px 15px;
  color: #ccc;
  letter-spacing: 0.7px;
  margin-top: 25px;
  
 
}

 .caret {
    float: right;
    margin-top: 9px;
    display: block;
  }

.dropdown-menu {
  width: 240px;
  padding: 0;
  margin: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown button:hover, .dropdown button:focus {
  border: none;
  outline: 0;
}

.dropdown.open button#dLabel {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
 
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.23);
  border: solid 1px #666;
   border-bottom: none;
}

.dropdown.open ul {
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.23);
  border: solid 1px #666;
  border-top: none;
  height: 200px;
  overflow-y: scroll;
}

.dropdown-menu li {
 
     line-height: 1.5;
  letter-spacing: 0.7px;
  color: #666;
    font-size: 14px;
  cursor: pointer;
  padding: 7.5px 15px;
  border-top: solid 1px #f3f3f3;
  
 
 
}

.dropdown-menu li:hover {
  background-color: #ccc;
}
$('.dropdown-menu li').on('click', function() {
  var getValue = $(this).text();
  $('.dropdown-select').text(getValue);
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js