Bootstrap Dropdown with color and icons


<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js"></script>
	
<div class="container">
	<div class="row">
		<h2>Button Dropdown Select</h2><br>
<div class="bs-docs-example">
  <select class="selectpicker" data-style="btn-primary" style="display: none;">
      <option>Mustard
      <option>Ketchup
      <option>Relish
  </select>
  <select class="selectpicker" data-style="btn-info" style="display: none;">
      <option>Mustard
      <option>Ketchup
      <option>Relish
  </select>
  <select class="selectpicker" data-style="btn-success" style="display: none;">
      <option>Mustard
      <option>Ketchup
      <option>Relish
  </select>
  <select class="selectpicker" data-style="btn-warning" style="display: none;">
      <option>Mustard
      <option>Ketchup
      <option>Relish
  </select>
  <select class="selectpicker" data-style="btn-danger" style="display: none;">
      <option>Mustard
      <option>Ketchup
      <option>Relish
  </select>
  <select class="selectpicker" data-style="btn-inverse" style="display: none;">
      <option>Mustard
      <option>Ketchup
      <option>Relish
  </select>
      
  </div>
<div class="bs-docs-example">
  <select class="selectpicker" multiple="" style="display: none;">
    <option>Mustard
    <option>Ketchup
    <option>Relish
  </select>
</div>
<select class="selectpicker" data-show-subtext="true" style="display: none;">
        <option data-subtext="French's">Mustard
        <option data-subtext="Heinz">Ketchup
        <option data-subtext="Sweet">Relish
        <option data-subtext="Miracle Whip">Mayonnaise
        <option data-divider="true">
        <option data-subtext="Honey">Barbecue Sauce
        <option data-subtext="Ranch">Salad Dressing
        <option data-subtext="Sweet & Spicy">Tabasco
        <option data-subtext="Chunky">Salsa
    </select>
    <select class="selectpicker" data-header="Select a condiment" style="display: none;">
        <option data-subtext="French's">Mustard
        <option data-subtext="Heinz">Ketchup
        <option data-subtext="Sweet">Relish
        <option data-subtext="Miracle Whip">Mayonnaise
        <option data-divider="true">
        <option data-subtext="Honey">Barbecue Sauce
        <option data-subtext="Ranch">Salad Dressing
        <option data-subtext="Sweet & Spicy">Tabasco
        <option data-subtext="Chunky">Salsa
    </select>
    <select class="selectpicker" data-size="5" style="display: none;">
      <option>Mustard
      <option>Ketchup
      <option>Relish
      <option>Mayonnaise
      <option>Barbecue Sauce
      <option>Salad Dressing
      <option>Tabasco
      <option>Salsa
  </select>
  <select class="selectpicker">
    <optgroup label="Picnic" disabled="">
      <option>Mustard
      <option>Ketchup
      <option>Relish
    </optgroup>
    <optgroup label="Camping">
      <option>Tent
      <option>Flashlight
      <option>Toilet Paper
    </optgroup>
  </select>
  <select class="selectpicker">
    <option>Mustard
    <option class="special">Ketchup
    <option>Relish
  </select>
    <select class="selectpicker" data-style="btn-primary" style="display: none;">
      <option data-icon="glyphicon glyphicon-music">Mustard
      <option data-icon="glyphicon glyphicon-star">Ketchup
      <option data-icon="glyphicon glyphicon-heart">Relish
  </select>
      <select class="selectpicker" data-style="btn-primary" data-width="auto" style="display: none;">
      <option data-icon="glyphicon glyphicon-music">Mustard
      <option data-icon="glyphicon glyphicon-star">Ketchup
      <option data-icon="glyphicon glyphicon-heart">Relish
  </select><br>
	</div>
</div>

            


    @import url("http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css")
    
            


      window.onload=function(){
      $('.selectpicker').selectpicker();
      $('.rm-mustard').click(function() {
        $('.remove-example').find('[value=Mustard]').remove();
        $('.remove-example').selectpicker('refresh');
      });
      $('.rm-ketchup').click(function() {
        $('.remove-example').find('[value=Ketchup]').remove();
        $('.remove-example').selectpicker('refresh');
      });
      $('.rm-relish').click(function() {
        $('.remove-example').find('[value=Relish]').remove();
        $('.remove-example').selectpicker('refresh');
      });
      $('.ex-disable').click(function() {
          $('.disable-example').prop('disabled',true);
          $('.disable-example').selectpicker('refresh');
      });
      $('.ex-enable').click(function() {
          $('.disable-example').prop('disabled',false);
          $('.disable-example').selectpicker('refresh');
      });

      // scrollYou
      $('.scrollMe .dropdown-menu').scrollyou();

      prettyPrint();
      };