"Cool Select's"
Bootstrap 3.2.0 Snippet by tje3d

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tje3d@yahoo.com</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css"/> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script> </head> <body> <div class="container"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <select name="" class="selectpicker" data-style="btn-primary" data-live-search="true"> <option value="">tje3d@yahoo.com</option> <option value="">Lorem ipsum.</option> <option value="">Lorem ipsum dolor sit.</option> <option value="">Lorem ipsum dolor.</option> <option value="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, rem.</option> </select> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <select name="" class="selectpicker" data-style="btn-default" data-live-search="true"> <option value="" data-icon="glyphicon-heart">tje3d@yahoo.com</option> <option value="" data-icon="glyphicon-pencil">Lorem ipsum.</option> <option value="" data-icon="glyphicon-camera">Lorem ipsum dolor sit.</option> <option value="" data-icon="glyphicon-pencil">Lorem ipsum dolor.</option> <option value="" data-icon="glyphicon-user">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, rem.</option> </select> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <select name="" class="selectpicker" data-style="btn-success" data-live-search="true"> <option value="" data-content="<span class='label label-info'>tje3d@yahoo.com</span>">tje3d@yahoo.com</option> <option value="" data-content="<span class='label label-success'>Lorem ipsum.</span>">Lorem ipsum.</option> <option value="" data-content="<span class='label label-danger'>Lorem ipsum dolor sit.</span>">Lorem ipsum dolor sit.</option> <option value="">Lorem ipsum dolor.</option> <option value="">Lorem ipsum dolor sit amet, c</option> </select> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <select name="" class="selectpicker" data-style="btn-info"> <option value="">tje3d@yahoo.com</option> <option value="">Lorem ipsum.</option> <option value="">Lorem ipsum dolor sit.</option> <option value="">Lorem ipsum dolor.</option> <option value="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, rem.</option> </select> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <select name="" class="selectpicker" data-style="btn-default"> <option value="">tje3d@yahoo.com</option> <option value="">Lorem ipsum.</option> <option value="">Lorem ipsum dolor sit.</option> <option value="">Lorem ipsum dolor.</option> <option value="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, rem.</option> </select> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <select name="" class="selectpicker" data-style="btn-success"> <option value="">tje3d@yahoo.com</option> <option value="">Lorem ipsum.</option> <option value="">Lorem ipsum dolor sit.</option> <option value="">Lorem ipsum dolor.</option> <option value="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, rem.</option> </select> </div> </div> </div> <script type="text/javascript"> $('.selectpicker').selectpicker(); </script> </body> </html>

Related: See More

BLK• Design System
Cool Navigation Bar
Multi Select Tiled Layout
Button Dropdown Select

Questions / Comments: