<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 ----------> <!-- Include the plugin's CSS and JS: --> <script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script> <style type="text/css"> @import url("http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css"); </style> <div class="container"> <br /> <hr /> <div class="row"> <div class="panel panel-primary filterable"> <div class="panel-heading"> <div class="pull-right"> <button class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filter</button> </div> <h3 class="panel-title">Group preview</h3> </div> <table class="table"> <thead> <tr class="filters"> <th class="column-01">Title</th> <th class="column-01"> </th> <th class="column-01"><p class="columnHeading">Price</p> <form class="form-inline" role="form"> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Price <span class="caret"></span> </button> <div class="dropdown-menu" role="menu"> <div class="input-group"> <input type="text" class="form-control input-number"> <span class="input-group-addon">GBP</span> </div> <div class="input-group"> <input type="text" class="form-control input-number"> <span class="input-group-addon">GBP</span> </div> </div> </div> </form> </th> <th class="column-02"> <p class="columnHeading">Assets</p> <form class="form-inline" role="form"> <div class="form-group"> <div class="input-group"> <select id="filter-assets" class="filter-me form-control" multiple="multiple" > <option selected value="a">Metadata</option> <option selected value="b">Trailer</option> <option selected value="c">Video feature</option> <option selected value="d">Cover artwork</option> <option value="e">Expanded artwork</option> <option value="f">Audio</option> </select> </div> </div> </form> </th> <th class="column-03"> <p class="columnHeading">Provider</p> <form class="form-inline" role="form"> <div class="form-group"> <div class="input-group"> <select id="filter-provider" class="filter-me form-control" multiple="multiple" > <option value="a">Option 1</option> <option value="b">Option 2</option> <option value="c">Option 3</option> <option value="d">Option 4</option> <option value="e">Option 5</option> <option value="f">Option 6</option> <option value="g">Option 7</option> <option value="h">Option 8</option> <option value="i">Option 9</option> <option value="j">Option 10</option> <option value="k">Option 11</option> <option value="l">Option 12</option> <option value="m">Option 13</option> <option value="n">Option 14</option> </select> </div> </div> </form> </th> <th class="column-04"> <p class="columnHeading">Genre</p> <form class="form-inline" role="form"> <div class="form-group"> <div class="input-group"> <select id="filter-genre" class="filter-me form-control" multiple="multiple" > <option value="a">Option 1</option> <option value="b">Option 2</option> <option value="c">Option 3</option> <option value="d">Option 4</option> <option value="e">Option 5</option> <option value="f">Option 6</option> <option value="g">Option 7</option> <option value="h">Option 8</option> <option value="i">Option 9</option> <option value="j">Option 10</option> <option value="k">Option 11</option> <option value="l">Option 12</option> <option value="m">Option 13</option> <option value="n">Option 14</option> </select> </div> </div> </form> </th> <th class="column-05"> <p class="columnHeading">Age range</p> <form class="form-inline" role="form"> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> Age range <span class="caret"></span> </button> <div class="dropdown-menu" role="menu"> <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]"> <span class="glyphicon glyphicon-minus"></span> </button> </span> <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10"> <span class="input-group-btn"> <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]"> <span class="glyphicon glyphicon-minus"></span> </button> </span> <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10"> <span class="input-group-btn"> <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </div> </div> </form> </th> <th class="column-06"> <p class="columnHeading">Subscription</p> <form class="form-inline" role="form"> <div class="form-group"> <div class="input-group"> <select id="example-filterBehavior" class="filter-me form-control" multiple="multiple" > <option value="a">Option 1</option> <option value="b">Option 2</option> <option value="c">Option 3</option> <option value="d">Option 4</option> <option value="e">Option 5</option> <option value="f">Option 6</option> <option value="g">Option 7</option> <option value="h">Option 8</option> <option value="i">Option 9</option> <option value="j">Option 10</option> <option value="k">Option 11</option> <option value="l">Option 12</option> <option value="m">Option 13</option> <option value="n">Option 14</option> </select> </div> </div> </form> </th> </tr> </thead> <tbody> <tr> <td class="column-01">Lorem ipsum dolor site amet</td> <td class="column-01"> </td> <td class="column-01">1</td> <td class="column-02">Trailer, cover artwork, expanaded artwork</td> <td class="column-03">Otto</td> <td class="column-04"></td> <td class="column-05"></td> <td class="column-06">@mdo</td> </tr> <tr> <td class="column-01">Lorem ipsum dolor site amet</td> <td class="column-01"> </td> <td class="column-01">1</td> <td class="column-02">Trailer, cover artwork, expanaded artwork</td> <td class="column-03">Otto</td> <td class="column-04"></td> <td class="column-05"></td> <td class="column-06">@mdo</td> </tr> <tr> <td class="column-01">Lorem ipsum dolor site amet</td> <td class="column-01"> </td> <td class="column-01">1</td> <td class="column-02">Trailer, metadata, video feature, cover artwork, expanaded artwork</td> <td class="column-03">Otto</td> <td class="column-04"></td> <td class="column-05"></td> <td class="column-06">@mdo</td> </tr> </tbody> </table> </div> </div> </div>

/* [START] CHECKBOXES */ .btn .glyphicon-checkbox:before{content:"\e067"} .btn.active .glyphicon-checkbox:before{content:"\e013"} /* [END] CHECKBOXES */

/* [START] MULTI-SELECT FILTER */ $(document).ready(function() { $('#example-filterBehavior, .filter-me').multiselect({ enableFiltering: true, filterBehavior: 'value', maxHeight: 200, }); }); /* [END] MULTI-SELECT FILTER */