/
var
/
www
/
barefootlaw.org
/
bios2
/
manager
/
Upload File
HOME
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!--<link rel="shortcut icon" href="../images/favicon.png" type="image/png">--> <title>Quirk Responsive Admin Templates</title> <link rel="stylesheet" href="../lib/fontawesome/css/font-awesome.css"> <link rel="stylesheet" href="../lib/weather-icons/css/weather-icons.css"> <link rel="stylesheet" href="../lib/jquery-toggles/toggles-full.css"> <link rel="stylesheet" href="../css/quirk.css"> <script src="../lib/modernizr/modernizr.js"></script> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../lib/html5shiv/html5shiv.js"></script> <script src="../lib/respond/respond.src.js"></script> <![endif]--> </head> <body> <header> <div class="headerpanel"> <div class="logopanel"> <h2><a href="index.php">Quirk</a></h2> </div><!-- logopanel --> <div class="headerbar"> <a id="menuToggle" class="menutoggle"><i class="fa fa-bars"></i></a> <div class="searchpanel"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> </span> </div><!-- input-group --> </div> <div class="header-right"> <ul class="headermenu"> <li> <div id="noticePanel" class="btn-group"> <button class="btn btn-notice alert-notice" data-toggle="dropdown"> <i class="fa fa-globe"></i> </button> <div id="noticeDropdown" class="dropdown-menu dm-notice pull-right"> <div role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs nav-justified" role="tablist"> <li class="active"><a data-target="#notification" data-toggle="tab">Notifications (2)</a></li> <li><a data-target="#reminders" data-toggle="tab">Reminders (4)</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="notification"> <ul class="list-group notice-list"> <li class="list-group-item unread"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-envelope"></i> </div> <div class="col-xs-10"> <h5><a href="">New message from Weno Carasbong</a></h5> <small>June 20, 2015</small> <span>Soluta nobis est eligendi optio cumque...</span> </div> </div> </li> <li class="list-group-item unread"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-user"></i> </div> <div class="col-xs-10"> <h5><a href="">Renov Leonga is now following you!</a></h5> <small>June 18, 2015</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-user"></i> </div> <div class="col-xs-10"> <h5><a href="">Zaham Sindil is now following you!</a></h5> <small>June 17, 2015</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-thumbs-up"></i> </div> <div class="col-xs-10"> <h5><a href="">Rey Reslaba likes your post!</a></h5> <small>June 16, 2015</small> <span>HTML5 For Beginners Chapter 1</span> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-comment"></i> </div> <div class="col-xs-10"> <h5><a href="">Socrates commented on your post!</a></h5> <small>June 16, 2015</small> <span>Temporibus autem et aut officiis debitis...</span> </div> </div> </li> </ul> <a class="btn-more" href="">View More Notifications <i class="fa fa-long-arrow-right"></i></a> </div><!-- tab-pane --> <div role="tabpanel" class="tab-pane" id="reminders"> <h1 id="todayDay" class="today-day">...</h1> <h3 id="todayDate" class="today-date">...</h3> <h5 class="today-weather"><i class="wi wi-hail"></i> Cloudy 77 Degree</h5> <p>Thunderstorm in the area this afternoon through this evening</p> <h4 class="panel-title">Upcoming Events</h4> <ul class="list-group"> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>20</h4> <p>Aug</p> </div> <div class="col-xs-10"> <h5><a href="">HTML5/CSS3 Live! United States</a></h5> <small>San Francisco, CA</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>05</h4> <p>Sep</p> </div> <div class="col-xs-10"> <h5><a href="">Web Technology Summit</a></h5> <small>Sydney, Australia</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>25</h4> <p>Sep</p> </div> <div class="col-xs-10"> <h5><a href="">HTML5 Developer Conference 2015</a></h5> <small>Los Angeles CA United States</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>10</h4> <p>Oct</p> </div> <div class="col-xs-10"> <h5><a href="">AngularJS Conference 2015</a></h5> <small>Silicon Valley CA, United States</small> </div> </div> </li> </ul> <a class="btn-more" href="">View More Events <i class="fa fa-long-arrow-right"></i></a> </div> </div> </div> </div> </div> </li> <li> <div class="btn-group"> <button type="button" class="btn btn-logged" data-toggle="dropdown"> <img src="images/photos/loggeduser.png" alt="" /> Elen Adarna <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="profile.html"><i class="glyphicon glyphicon-user"></i> My Profile</a></li> <li><a href="#"><i class="glyphicon glyphicon-cog"></i> Account Settings</a></li> <li><a href="#"><i class="glyphicon glyphicon-question-sign"></i> Help</a></li> <li><a href="signin.php"><i class="glyphicon glyphicon-log-out"></i> Log Out</a></li> </ul> </div> </li> <li> <button id="chatview" class="btn btn-chat alert-notice"> <span class="badge-alert"></span> <i class="fa fa-comments-o"></i> </button> </li> </ul> </div><!-- header-right --> </div><!-- headerbar --> </div><!-- header--> </header> <section> <div class="leftpanel"> <div class="leftpanelinner"> <!-- ################## LEFT PANEL PROFILE ################## --> <div class="media leftpanel-profile"> <div class="media-left"> <a href="#"> <img src="../images/photos/loggeduser.png" alt="" class="media-object img-circle"> </a> </div> <div class="media-body"> <h4 class="media-heading">Elen Adarna <a data-toggle="collapse" data-target="#loguserinfo" class="pull-right"><i class="fa fa-angle-down"></i></a></h4> <span>Software Engineer</span> </div> </div><!-- leftpanel-profile --> <div class="leftpanel-userinfo collapse" id="loguserinfo"> <h5 class="sidebar-title">Address</h5> <address> 4975 Cambridge Road Miami Gardens, FL 33056 </address> <h5 class="sidebar-title">Contact</h5> <ul class="list-group"> <li class="list-group-item"> <label class="pull-left">Email</label> <span class="pull-right">me@themepixels.com</span> </li> <li class="list-group-item"> <label class="pull-left">Home</label> <span class="pull-right">(032) 1234 567</span> </li> <li class="list-group-item"> <label class="pull-left">Mobile</label> <span class="pull-right">+63012 3456 789</span> </li> <li class="list-group-item"> <label class="pull-left">Social</label> <div class="social-icons pull-right"> <a href="#"><i class="fa fa-facebook-official"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-pinterest"></i></a> </div> </li> </ul> </div><!-- leftpanel-userinfo --> <ul class="nav nav-tabs nav-justified nav-sidebar"> <li class="tooltips active" data-toggle="tooltip" title="Main Menu"><a data-toggle="tab" data-target="#mainmenu"><i class="tooltips fa fa-ellipsis-h"></i></a></li> <li class="tooltips unread" data-toggle="tooltip" title="Check Mail"><a data-toggle="tab" data-target="#emailmenu"><i class="tooltips fa fa-envelope"></i></a></li> <li class="tooltips" data-toggle="tooltip" title="Contacts"><a data-toggle="tab" data-target="#contactmenu"><i class="fa fa-user"></i></a></li> <li class="tooltips" data-toggle="tooltip" title="Settings"><a data-toggle="tab" data-target="#settings"><i class="fa fa-cog"></i></a></li> <li class="tooltips" data-toggle="tooltip" title="Log Out"><a href="signin.php"><i class="fa fa-sign-out"></i></a></li> </ul> <div class="tab-content"> <!-- ################# MAIN MENU ################### --> <div class="tab-pane active" id="mainmenu"> <h5 class="sidebar-title">Favorites</h5> <ul class="nav nav-pills nav-stacked nav-quirk"> <li><a href="index.php"><i class="fa fa-home"></i> <span>Dashboard</span></a></li> <li><a href="widgets.html"><span class="badge pull-right">10+</span><i class="fa fa-cube"></i> <span>Widgets</span></a></li> <li><a href="maps.php"><i class="fa fa-map-marker"></i> <span>Maps</span></a></li> </ul> <h5 class="sidebar-title">Main Menu</h5> <ul class="nav nav-pills nav-stacked nav-quirk"> <li class="nav-parent"> <a href=""><i class="fa fa-check-square"></i> <span>Forms</span></a> <ul class="children"> <li><a href="general-forms.php">Form Elements</a></li> <li><a href="form-validation.html">Form Validation</a></li> <li><a href="form-wizards.html">Form Wizards</a></li> <li><a href="wysiwyg.html">Text Editor</a></li> </ul> </li> <li class="nav-parent"><a href=""><i class="fa fa-suitcase"></i> <span>UI Elements</span></a> <ul class="children"> <li><a href="buttons.html">Buttons</a></li> <li><a href="icons.html">Icons</a></li> <li><a href="typography.html">Typography</a></li> <li><a href="alerts.html">Alerts & Notifications</a></li> <li><a href="tabs-accordions.html">Tabs & Accordions</a></li> <li><a href="sliders.html">Sliders</a></li> <li><a href="graphs.html">Graphs & Charts</a></li> <li><a href="panels.html">Panels</a></li> <li><a href="extras.html">Extras</a></li> </ul> </li> <li class="nav-parent active"><a href=""><i class="fa fa-th-list"></i> <span>Tables</span></a> <ul class="children"> <li class="active"><a href="basic-tables.html">Basic Tables</a></li> <li><a href="data-tables.html">Data Tables</a></li> </ul> </li> <li class="nav-parent"><a href=""><i class="fa fa-file-text"></i> <span>Pages</span></a> <ul class="children"> <li><a href="asset-manager.html">Asset Manager</a></li> <li><a href="people-directory.html">People Directory</a></li> <li><a href="timeline.html">Timeline</a></li> <li><a href="profile.html">Profile</a></li> <li><a href="blank.html">Blank Page</a></li> <li><a href="notfound.html">404 Page</a></li> <li><a href="signin.php">Sign In</a></li> <li><a href="signup.html">Sign Up</a></li> </ul> </li> </ul> </div><!-- tab-pane --> <!-- ######################## EMAIL MENU ##################### --> <div class="tab-pane" id="emailmenu"> <div class="sidebar-btn-wrapper"> <a href="compose.html" class="btn btn-danger btn-block">Compose</a> </div> <h5 class="sidebar-title">Mailboxes</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-mail"> <li><a href="email.html"><i class="fa fa-inbox"></i> <span>Inbox (3)</span></a></li> <li><a href="email.html"><i class="fa fa-pencil"></i> <span>Draft (2)</span></a></li> <li><a href="email.html"><i class="fa fa-paper-plane"></i> <span>Sent</span></a></li> </ul> <h5 class="sidebar-title">Tags</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-label"> <li><a href="#"><i class="fa fa-tags primary"></i> <span>Communication</span></a></li> <li><a href="#"><i class="fa fa-tags success"></i> <span>Updates</span></a></li> <li><a href="#"><i class="fa fa-tags warning"></i> <span>Promotions</span></a></li> <li><a href="#"><i class="fa fa-tags danger"></i> <span>Social</span></a></li> </ul> </div><!-- tab-pane --> <!-- ################### CONTACT LIST ################### --> <div class="tab-pane" id="contactmenu"> <div class="input-group input-search-contact"> <input type="text" class="form-control" placeholder="Search contact"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> </span> </div> <h5 class="sidebar-title">My Contacts</h5> <ul class="media-list media-list-contacts"> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user1.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Christina R. Hill</h4> <span><i class="fa fa-phone"></i> 386-752-1860</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user2.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Floyd M. Romero</h4> <span><i class="fa fa-mobile"></i> +1614-650-8281</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user3.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Jennie S. Gray</h4> <span><i class="fa fa-phone"></i> 310-757-8444</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user4.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Alia J. Locher</h4> <span><i class="fa fa-mobile"></i> +1517-386-0059</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user5.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Nicholas T. Hinkle</h4> <span><i class="fa fa-skype"></i> nicholas.hinkle</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user6.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Jamie W. Bradford</h4> <span><i class="fa fa-phone"></i> 225-270-2425</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user7.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Pamela J. Stump</h4> <span><i class="fa fa-mobile"></i> +1773-879-2491</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user8.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Refugio C. Burgess</h4> <span><i class="fa fa-mobile"></i> +1660-627-7184</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user9.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Ashley T. Brewington</h4> <span><i class="fa fa-skype"></i> ashley.brewington</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user10.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Roberta F. Horn</h4> <span><i class="fa fa-phone"></i> 716-630-0132</span> </div> </a> </li> </ul> </div><!-- tab-pane --> <!-- #################### SETTINGS ################### --> <div class="tab-pane" id="settings"> <h5 class="sidebar-title">General Settings</h5> <ul class="list-group list-group-settings"> <li class="list-group-item"> <h5>Daily Newsletter</h5> <small>Get notified when someone else is trying to access your account.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle toggle-light success"></div> </div> </li> <li class="list-group-item"> <h5>Call Phones</h5> <small>Make calls to friends and family right from your account.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle-off toggle-light success"></div> </div> </li> </ul> <h5 class="sidebar-title">Security Settings</h5> <ul class="list-group list-group-settings"> <li class="list-group-item"> <h5>Login Notifications</h5> <small>Get notified when someone else is trying to access your account.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle toggle-light success"></div> </div> </li> <li class="list-group-item"> <h5>Phone Approvals</h5> <small>Use your phone when login as an extra layer of security.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle toggle-light success"></div> </div> </li> </ul> </div><!-- tab-pane --> </div><!-- tab-content --> </div><!-- leftpanelinner --> </div><!-- leftpanel --> <div class="mainpanel"> <div class="contentpanel"> <ol class="breadcrumb breadcrumb-quirk"> <li><a href="index.php"><i class="fa fa-home mr5"></i> Home</a></li> <li><a href="basic-tables.html">Tables</a></li> <li class="active">Basic Tables</li> </ol> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Basic Styling</h4> <p>For basic styling add the base class <code>.table</code> to any table.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th>Position</th> <th>Office</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> <th></th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Striped Row Table</h4> <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>tbody</code></p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-striped nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th>Position</th> <th>Office</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> <th></th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Hover Row Table</h4> <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-hover nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th>Position</th> <th>Office</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> <th></th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Bordered Table</h4> <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th>Position</th> <th>Office</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> <th></th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Striped Column Table</h4> <p>Add <code>.table-bordered</code> and <code>.table-striped-col</code> for striped columns on table and cells.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-striped-col nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th>Position</th> <th>Office</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> <th></th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> <td> <ul class="table-options"> <li><a href=""><i class="fa fa-pencil"></i></a></li> <li><a href=""><i class="fa fa-trash"></i></a></li> </ul> </td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> <div class="row"> <div class="col-md-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Primary Colored Table</h4> <p>Add <code>.table-primary</code> for a primary colored table.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-primary nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> </div> <div class="col-md-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Primary Colored Striped Table</h4> <p>Add <code>.table-primary</code> and <code>.table-striped</code> for a primary colored striped table.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-primary table-striped nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-primary"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> </div> </div><!-- row --> <div class="row"> <div class="col-md-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Success Colored Table</h4> <p>Add <code>.table-success</code> for a success colored table.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-success nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-success"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-success"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-success"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-success"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-success"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-success"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> </div> <div class="col-md-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Success Colored Striped Table</h4> <p>Add <code>.table-success</code> and <code>.table-striped</code> for a success colored striped table.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-success table-striped nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-success"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-success"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-success"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-success"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-success"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-success"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> </div> </div><!-- row --> <div class="row"> <div class="col-md-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Warning Colored Table</h4> <p>Add <code>.table-warning</code> for a warning colored table.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-warning nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-warning"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-warning"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-warning"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-warning"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-warning"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-warning"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> </div> <div class="col-md-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Warning Colored Striped Table</h4> <p>Add <code>.table-warning</code> and <code>.table-striped</code> for a warning colored striped table.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-warning table-striped nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-warning"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-warning"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-warning"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-warning"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-warning"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-warning"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> </div> </div><!-- row --> <div class="row"> <div class="col-md-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Danger Colored Table</h4> <p>Add <code>.table-danger</code> for a danger colored table.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-danger nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-danger"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-danger"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-danger"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-danger"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-danger"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-danger"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> </div> <div class="col-md-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Danger Colored Striped Table</h4> <p>Add <code>.table-danger</code> and <code>.table-striped</code> for a danger colored striped table.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-danger table-striped nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox ckbox-danger"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox ckbox-danger"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-danger"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-danger"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-danger"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> </tr> <tr> <td class="text-center"> <label class="ckbox ckbox-danger"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> </div> </div><!-- row --> <div class="row"> <div class="col-md-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Inverse Colored Table</h4> <p>Add <code>.table-inverse</code> for an inverse colored table.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-inverse nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> </tr> <tr> <td class="text-center"> <label class="ckbox"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> </tr> <tr> <td class="text-center"> <label class="ckbox"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> </tr> <tr> <td class="text-center"> <label class="ckbox"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> </tr> <tr> <td class="text-center"> <label class="ckbox"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> </div> <div class="col-md-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Inverse Colored Striped Table</h4> <p>Add <code>.table-inverse</code> and <code>.table-striped</code> for an inverse colored striped table.</p> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-inverse table-striped nomargin"> <thead> <tr> <th class="text-center"> <label class="ckbox"> <input type="checkbox"><span></span> </label> </th> <th>Name</th> <th class="text-center">Age</th> <th class="text-right">Start date</th> <th class="text-right">Salary</th> </tr> </thead> <tbody> <tr> <td class="text-center"> <label class="ckbox"> <input type="checkbox"><span></span> </label> </td> <td>Tiger Nixon</td> <td class="text-center">61</td> <td class="text-right">2011/04/25</td> <td class="text-right">$320,800</td> </tr> <tr> <td class="text-center"> <label class="ckbox"> <input type="checkbox"><span></span> </label> </td> <td>Garrett Winters</td> <td class="text-center">63</td> <td class="text-right">2011/07/25</td> <td class="text-right">$170,750</td> </tr> <tr> <td class="text-center"> <label class="ckbox"> <input type="checkbox"><span></span> </label> </td> <td>Ashton Cox</td> <td class="text-center">66</td> <td class="text-right">2009/01/12</td> <td class="text-right">$86,000</td> </tr> <tr> <td class="text-center"> <label class="ckbox"> <input type="checkbox"><span></span> </label> </td> <td>Cedric Kelly</td> <td class="text-center">22</td> <td class="text-right">2012/03/29</td> <td class="text-right">$433,060</td> </tr> <tr> <td class="text-center"> <label class="ckbox"> <input type="checkbox"><span></span> </label> </td> <td>Airi Satou</td> <td class="text-center">33</td> <td class="text-right">2008/11/28</td> <td class="text-right">$162,700</td> </tr> </tbody> </table> </div><!-- table-responsive --> </div> </div><!-- panel --> </div> </div><!-- row --> </div><!-- contentpanel --> </div><!-- mainpanel --> </section> <script src="../lib/jquery/jquery.js"></script> <script src="../lib/jquery-ui/jquery-ui.js"></script> <script src="../lib/bootstrap/js/bootstrap.js"></script> <script src="../lib/jquery-toggles/toggles.js"></script> <script src="../js/quirk.js"></script> <script> $(document).ready(function() { 'use strict'; $('.table tr td:first-child input[type=checkbox]').each(function() { checkRow($(this)); }); $('.table tr td:first-child input[type=checkbox]').click(function() { checkRow($(this)); }); function checkRow(row) { if(row.is(':checked')) { row.closest('tr').addClass('info'); } else { row.closest('tr').removeClass('info'); } } }); </script> </body> </html>