{{ include('partials/main.html.twig') }} <head> {{ include('partials/title-meta.html.twig', {title: 'Bootstrap Basic'}) }} {{ include('partials/head-css.html.twig') }} </head> {{ include('partials/body.html.twig') }} <!-- Begin page --> <div id="layout-wrapper"> {{ include('partials/menu.html.twig') }} <!-- ============================================================== --> <!-- Start right Content here --> <!-- ============================================================== --> <div class="main-content"> <div class="page-content"> <div class="container-fluid"> {{ include('partials/page-title.html.twig', {pagetitle: 'Tables', title: 'Bootstrap Basic'}) }} <div class="row"> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Basic example</h4> <p class="card-title-desc">For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. </p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Dark table</h4> <p class="card-title-desc">You can also invert the colors—with light text on dark backgrounds—with <code>.table-dark</code>. </p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-dark mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> </div> <!-- end row --> <div class="row"> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Table head</h4> <p class="card-title-desc">Use one of two modifier classes to make <code><thead></code>s appear light or dark gray.</p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table mb-0"> <thead class="table-light"> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Striped rows</h4> <p class="card-title-desc">Use <code>.table-striped</code> to add zebra-striping to any table row within the <code><tbody></code>.</p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-striped mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> </div> <!-- end row --> <div class="row"> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Bordered table</h4> <p class="card-title-desc">Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-bordered mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Borderless table</h4> <p class="card-title-desc"> Add <code>.table-borderless</code> for a table without borders.</p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-borderless mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> </div> <!-- end row --> <div class="row"> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Table Border color</h4> <p class="card-title-desc">Add <code>.table-bordered</code> & <code>.border-*</code> for colored borders on all sides of the table and cells.</p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-bordered border-primary mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Table Border color</h4> <p class="card-title-desc">Add <code>.table-bordered</code> & <code>.border-*</code> for colored borders on all sides of the table and cells.</p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-bordered border-success mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> </div> <!-- end row --> <div class="row"> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Vertical alignment</h4> <p class="card-title-desc">Table cells in <code><tbody></code> inherit their alignment from <code><table></code> and are aligned to the the top by default. Use the vertical align classes to re-align where needed.</p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table align-middle mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Action</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td> <button type="button" class="btn btn-light btn-sm">View</button> </td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td> <button type="button" class="btn btn-light btn-sm">View</button> </td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td> <button type="button" class="btn btn-light btn-sm">View</button> </td> </tr> <tr> <th scope="row">4</th> <td>Jacob</td> <td>Thornton</td> <td> <button type="button" class="btn btn-light btn-sm">View</button> </td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Nesting</h4> <p class="card-title-desc"> Border styles, active styles, and table variants are not inherited by nested tables.</p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-striped table-bordered mb-0"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td colspan="4"> <table class="table mb-0"> <thead> <tr> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col">Header</th> </tr> </thead> <tbody> <tr> <th scope="row">A</th> <td>First</td> <td>Last</td> </tr> <tr> <th scope="row">B</th> <td>First</td> <td>Last</td> </tr> </tbody> </table> </td> </tr> <tr> <th scope="row">3</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> </div> <!-- end row --> <div class="row"> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Hoverable rows</h4> <p class="card-title-desc">Add <code>.table-hover</code> to enable a hover state on table rows within a <code><tbody></code>.</p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-hover mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Small table</h4> <p class="card-title-desc"> Add <code>.table-sm</code> to make tables more compact by cutting cell padding in half.</p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-sm m-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> <tr> <th scope="row">4</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">5</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> </div> <!-- end row --> <div class="row"> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Contextual classes</h4> <p class="card-title-desc">Use contextual classes to color table rows or individual cells.</p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table mb-0"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr class="table-light"> <th scope="row">1</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="table-success"> <th scope="row">2</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="table-info"> <th scope="row">3</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="table-warning"> <th scope="row">4</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="table-danger"> <th scope="row">5</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> <div class="col-xl-6"> <div class="card"> <div class="card-header"> <h4 class="card-title">Captions</h4> <p class="card-title-desc">A <code><caption></code> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.</p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table mb-0"> <caption>List of users</caption> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> </div> <!-- end row --> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-header"> <h4 class="card-title">Responsive table</h4> <p class="card-title-desc"> Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). </p> </div> <div class="card-body"> <div class="table-responsive"> <table class="table mb-0"> <thead> <tr> <th>#</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <th scope="row">2</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <th scope="row">3</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> </tbody> </table> </div> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> </div> <!-- end row --> </div> <!-- container-fluid --> </div> <!-- End Page-content --> {{ include('partials/footer.html.twig') }} </div> <!-- end main content--> </div> <!-- END layout-wrapper --> {{ include('partials/right-sidebar.html.twig') }} {{ include('partials/vendor-scripts.html.twig') }} <script src="/js/app.js"></script> </body></html>