<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div id="filter-panel" class="collapse filter-panel"> <div class="panel panel-default"> <div class="panel-body"> <form class="form" role="form"> <div class="form-group col-xs-2 col-md-2"> <label class="control-label" for="pref-perpage">Facility</label> <select id="pref-perpage" class="form-control"> <option value="All">All Facilities</option> <option value="BHMC-Ar">BHMC-Ar</option> <option value="BHMC-HSC">BHMC-HSC</option> <option value="BHMC-LR">BHMC-LR</option> <option value="BHMC-NLR">BHMC-NLR</option> <option value="BHMC-Parkway/HH">BHMC-Parkway/HH</option> <option value="BHMC-ST">BHMC-ST</option> <option value="BHRI">BHRI</option> <option value="BRMC">BRMC</option> <option value="BRMC Clinics">BRMC Clinics</option> <option value="ConwayRMC">ConwayRMC</option> <option value="CrossRidge">CrossRidge</option> <option value="Harris Med Center">Harris Med Center</option> <option value="SBMC">SBMC</option> <option value="St Bernard Clinics">St Bernard Clinics</option> <option value="Unity Health - WCMC">Unity Health - WCMC</option> </select> </div> <!-- form group [rows] --> <div class="form-group col-xs-2 col-md-2"> <label class="control-label" for="pref-search">Affected Party Type</label> <select id="pref-search" class="form-control"> <option value="All">All</option> <option value="Inpatient">Inpatient</option> <option value="Outpatient">Outpatient</option> <option value="Visitor">Visitor</option> </select> </div><!-- form group [search] --> <div class="form-group col-xs-2 col-md-2"> <label class="control-label" for="pref-orderby">Event Category</label> <select id="pref-orderby" class="form-control"> <option value="All">All</option> <option value="Incident">Incident</option> <option value="Near Miss">Near Miss</option> </select> </div> <div class="form-group col-xs-3 col-md-3"> <label class="control-label" for="pref-orderby">Event Type</label> <select id="pref-orderby" class="form-control"> <option value="All">All</option> <option value="Fall">Fall</option> <option value="Fall|Other">Fall|Other</option> <option value="Fall|Perinatal">Fall|Perinatal</option> <option value="Device or Medical/Surgical Supply|Fall">Device or Medical/Surgical Supply|Fall</option> <option value="Blood or Blood Product|Fall">Blood or Blood Product|Fall</option> <option value="Fall|Perinatal|Surgery or Anesthesia">Fall|Perinatal|Surgery or Anesthesia</option> <option value="Fall|Medication or Other Substance">Fall|Medication or Other Substance</option> <option value="Fall|Pressure Ulcer">Fall|Pressure Ulcer</option> <option value="Fall|Surgery or Anesthesia">Fall|Surgery or Anesthesia</option> <option value="Fall|Emergency Code">Fall|Emergency Code</option> </select> </div> <div class="form-group col-xs-2 col-md-2"> <label class="control-label" for="pref-orderby">Final Harm</label> <select id="pref-orderby" class="form-control"> <option value="All">All</option> <option value="No Harm">No Harm</option> <option value="Mild Harm">Mild Harm</option> <option value="Moderate Harm">Moderate Harm</option> <option value="Severe Harm">Severe Harm</option> <option value="Death">Death</option> </select> </div> </form> <form class="form" role="form"> <div class="form-group col-xs-2 col-md-2"> <label class="control-label" for="pref-perpage">Start Date</label> <input type="text" class="form-control input-sm" id="pref-perpage" value="2010-01-01"> </div> <!-- form group [rows] --> <div class="form-group col-xs-2 col-md-2"> <label class="control-label" for="pref-search">End Date</label> <input type="text" class="form-control input-sm" id="pref-search" value="2018-05-29"> </div><!-- form group [search] --> <div class="form-group col-xs-2 col-md-2"> <div class="radio"> <label> <input type="radio" name="optionRadios" id="optionRadios1" value="option1" checked> Event Date </label> </div> <div class="radio"> <label> <input type="radio" name="optionRadios" id="optionRadios2" value="option2"> Report Date </label> </div> </div> <div class="form-group col-xs-2 col-md-2 col-md-offset-3"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Word Cloud </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Word Ranking </label> </div> </div> </form> </div> </div> </div> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#filter-panel"> <span class="glyphicon glyphicon-cog"></span> Options </button> </div> </div>

.container{ margin-top:30px; } .filter-col{ padding-left:10px; padding-right:10px; }