<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6"> <h3>Input Group Addon</h3> <hr /> <div class="input-group"> <span class="input-group-addon custom__addon blue__addon"> <span class="glyphicon glyphicon-cog"></span>  Choices </span> <select class="form-control custom__select"> <option value="global">GLobal</option> <option value="week">This Week</option> <option value="month">This Month</option> <option value="year">This Year</option> </select> </div> <hr /> <div class="input-group"> <span class="input-group-addon custom__addon red__addon"> <span class="glyphicon glyphicon-cog"></span>  Choices </span> <select class="form-control custom__select"> <option value="global">GLobal</option> <option value="week">This Week</option> <option value="month">This Month</option> <option value="year">This Year</option> </select> </div> <hr /> <div class="input-group"> <span class="input-group-addon custom__addon green__addon"> <span class="glyphicon glyphicon-cog"></span>  Choices </span> <select class="form-control custom__select"> <option value="global">GLobal</option> <option value="week">This Week</option> <option value="month">This Month</option> <option value="year">This Year</option> </select> </div> <hr /> <div class="input-group"> <span class="input-group-addon custom__addon yellow__addon"> <span class="glyphicon glyphicon-cog"></span>  Choices </span> <select class="form-control custom__select"> <option value="global">GLobal</option> <option value="week">This Week</option> <option value="month">This Month</option> <option value="year">This Year</option> </select> </div> <hr /> <div class="input-group"> <span class="input-group-addon custom__addon purple__addon"> <span class="glyphicon glyphicon-cog"></span>  Choices </span> <select class="form-control custom__select"> <option value="global">GLobal</option> <option value="week">This Week</option> <option value="month">This Month</option> <option value="year">This Year</option> </select> </div> <hr /> </div> </div> </div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300); body { font: 12px 'Open Sans'; } .custom__addon { color: #fff; border: none; font-size: 12px; border-radius: 2px; text-transform: uppercase; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .blue__addon { background-color: #337ab7; } .red__addon { background-color: #B73333; } .green__addon { background-color: #33B757; } .yellow__addon { background-color: #B7B433; } .purple__addon { background-color: #B733AC; } .custom__select { border: none; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }