<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 launchpad"> <div class="row launchpad-student-row launchpad-right-widget"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary btn-sm">All students</button> <button type="button" class="btn btn-default btn-sm">My caseload</button> </div> </div> <div class="row launchpad-student-row"> <div class="launchpad-search"> <input class="form-control launchpad-search launchpad-search-student" type="text" id="launchpad-search-student" placeholder="Student Name or Identifier"> <span id="student-clear" class="searchclear glyphicon glyphicon-remove" style="display: none;"></span> </input> <select id="launchpad-search-plan" class="form-control launchpad-search launchpad-search-plan"> <option value="">Plan type</option> <option value="IEP" selected="selected">IEP</option> <option value="504">504</option> <option value="RTI">RTI</option> </select> <select id="launchpad-search-school" class="form-control launchpad-search launchpad-search-school"> <option value="">School</option> <option value="SEAS University" selected="selected">SEAS University</option> <option value="Jedi Academy">Jedi Academy</option> <option value="Charles Xavier's School for the gifted">Charles Xavier's School for the gifted</option> </select> <select id="launchpad-search-grade" class="form-control launchpad-search launchpad-search-grade"> <option value="">Grade</option> <option value="1st" selected="selected">1st</option> <option value="2nd">2nd</option> <option value="3rd">3rd</option> </select> <input class="form-control launchpad-search launchpad-search-staff" type="text" id="launchpad-search-staff" placeholder="Staff member"> <span id="staff-clear" class="searchclear glyphicon glyphicon-remove" style="display: none;"></span> </input> <div class="launchpad-right-widget"> <a href="#" class="launchpad-compliance"> <span class="glyphicon glyphicon-check launchpad-add" aria-hidden="true"></span> Compliance Summary </a> </div> </div> </div> <div class="row launchpad-student-row"> <a href="#"> <span class="glyphicon glyphicon-plus launchpad-add" aria-hidden="true"></span> Add student </a> </div> <div class="row"> <table class="table"> <thead> <th> <h2>Name</h2> </th> <th> <h2>ID</h2> </th> <th> <h2>Campus</h2> </th> <th> <h2>Grade</h2> </th> </thead> <tbody> <tr> <td> <h4>Bud Tuggly</h4> <div> <button type="button" class="btn btn-primary btn-xs">IEP</button> <button type="button" class="btn btn-primary btn-xs">504</button> <button type="button" class="btn btn-default btn-xs">RTI</button> <a href="#"> <span class="glyphicon glyphicon-plus launchpad-add" aria-hidden="true"></span> </a> </div> </td> <td> <h4>3458428</h4> </td> <td> <h4>Jedi Academy</h4> <ul class="launchpad-duepackets"> <li> <span class="glyphicon glyphicon-calendar"></span> <span>Placement Review – Due on 6/12/16</span> </li> <li> <span class="glyphicon glyphicon-calendar launchpad-duepackets-due"></span> <span class="launchpad-duepackets-due">Initial IEP Review – Due on 3/20/16</span> </li> <li> <span class="glyphicon glyphicon-calendar launchpad-duepackets-overdue "></span> <span class="launchpad-duepackets-overdue">Triennial Assessment – <i>30 days overdue</i> 2/15/16</span> </li> </ul> </td> <td> <h4>10th</h4> </td> </tr> <tr> <td> <h4>Hugh Jazz</h4> <div> <button type="button" class="btn btn-primary btn-xs">IEP</button> <button type="button" class="btn btn-default btn-xs">504</button> <a href="#"> <span class="glyphicon glyphicon-plus launchpad-add" aria-hidden="true"></span> </a> </div> </td> <td> <h4>34059945</h4> </td> <td> <h4>SEAS University</h4> <ul class="launchpad-duepackets"> <li> <span class="glyphicon glyphicon-calendar"></span> <span>Annual IEP Review – Due on 5/25/16</span> </li> </ul> </td> <td> <h4>6th</h4> </td> </tr> <tr> <td> <h4>Mike Easter</h4> <div> <button type="button" class="btn btn-default btn-xs">504</button> <a href="#"> <span class="glyphicon glyphicon-plus launchpad-add" aria-hidden="true"></span> </a> </div> </td> <td> <h4>64994857</h4> </td> <td> <h4>SEAS University</h4> <ul class="launchpad-duepackets"> <li> <li>No events due</li> </li> </ul> </td> <td> <h4>6th</h4> </td> </tr> <tr> <td> <h4>Seymour Hiney</h4> <div> <a href="#"> <span class="glyphicon glyphicon-plus launchpad-add" aria-hidden="true"></span> Add plan </a> </div> </td> <td> <h4>84674947</h4> </td> <td> <h4>SEAS University</h4> <ul class="launchpad-duepackets"> <li> <span>No events due</span> </li> </ul> </td> <td> <h4>8th</h4> </td> </tr> </tbody> </table> </div> <div class="row launchpad-paging"> <ul class="pagination"> <li><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </div> <div class="row launchpad-paging" style="align-content: center"> <span>Go to page: </span> <select id="launchpad-paging-goto" class="launchpad-paging-goto"> <option value="">1</option> <option value="2" selected="selected">2</option> <option value="3">3</option> <option value="4">4</option> </select> </div> </div>

.launchpad { padding: 2em; border-radius: 5px; border-width: 2px; border-style: solid; border-color: #357ebd; } .launchpad-duepackets { padding-left: 1.5em; list-style-type: none; } .launchpad-duepackets-due { color: #D9A868; } .launchpad-duepackets-overdue { color: #B04848; } .launchpad-search { display: inline; } .launchpad-search-student, .launchpad-search-staff, .launchpad-search-school { width: 15em; } .launchpad-search-plan, .launchpad-search-grade, .launchpad-paging-goto { width: 7em; } .launchpad-right-widget { float: right; } .launchpad-right-widget > a { display: block; } .launchpad-paging { text-align: center; } .launchpad-add{ font-size: 0.75em; } .launchpad-student-row{ padding-top: 0.75em; }