<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css"/> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="example"> <p>Dropdown example</p> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> </div> <div class="example"> <p>Select plugin example</p> <select class="col-md-2 selectpicker" style="margin:15px"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option class="red" value="5">May</option> <option style="background-color:green" value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9" selected>September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> </div> <div class="example"> <p>Bottom aligned divs</p> <div class="container-test"> <div class="content">one</div> <div class="content">two</div> </div> </div> </div> </div> </div> <div class="row hidden"> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom affix-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> </button> <!-- Brand image or brand name --> <!-- <img class="navbar-brand" src="#"/> --> <a class="navbar-brand" href="#page-top">Brand name</a> </div> <!-- Menu options --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden active"> <a href="#page-top"></a> </li> <li class="page-scroll"> <a href="#">Option 1</a> </li> <li class="page-scroll"> <a href="#">Option 2</a> </li> <li class="page-scroll"> <a href="#">Option 3</a> </li> </ul> </div> <div class="row"> <div class="col-xs-12"> <!-- Account selection for mobile - I --> <div class="dropdown"> <button id="actionsDrop" class="btn btn-default dropdown-toggle col-xs-12" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> HSA - $587.50 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="actionsDrop"> <li class="selected"><a href="#">HSA - $587.50</a></li> <li><a href="#">FSA - $120.00</a></li> <li><a href="#">HSAOD - $350.00</a></li> <li><a href="#">DCAP - $2300,00</a></li> </ul> </div> <!-- Account selection for mobile - F --> </div> </div> </div> </nav> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script> </body> </html>

.red { background-color: red; } /* Dropdowns .dropdown .dropdown-toggle .down-arrow { display: inline-block; margin-top: 6px; margin-left:5px; width: 16px; height: 9px; background-image: url("http://www.htic.es/assets/down-arrow.png") } .dropdown .dropdown-toggle .caret { display: none; } .dropdown.open .down-arrow { behavior:url(-ms-transform.htc); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); transform: rotate(-180deg); } .dropdown button, .dropdown-menu { background-color: #f6f8f8; } .dropdown-menu { margin-top: 0px; background-color: #f6f8f8; border-radius: 0 0 0 0; } .dropdown-menu > li > a:hover { background-color: #96a4ad; } /* Dropdowns - F */ .container .example { box-sizing: border-box; margin-top: 15px; overflow:visible; clear:both; padding: 15px; } .container .example p { font-weight:bold; width:100%; } .container-test { display:flex; align-items:flex-end; background-color: #A9E2F3; text-align:center; height: 100px; } .container-test .content { background-color: #00BFFF; width:100%; } /* Dropdowns - I */ .bootstrap-select { padding: 0; } .bootstrap-select .dropdown-toggle span.caret, .dropdown .dropdown-toggle span.caret { display: inline-block; border:none; width: 16px; height: 9px; background-image: url("http://www.htic.es/assets/down-arrow.png"); content: ""; } .bootstrap-select .dropdown.open span.caret, .dropdown.open span.caret { behavior:url(-ms-transform.htc); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); transform: rotate(-180deg); } .dropdown button, .dropdown-menu { background-color: #ffffff; } .dropdown-menu { margin-top: 0px; background-color:#f6f8f8; border-radius: 0 0 0 0; } .dropdown-menu > li > a:hover { background-color: #96a4ad; } /* Dropdowns - F */