- var theme_customizer = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader // page-wrapper Start #pageWrapper.page-wrapper include ../../components/header // Page Body Start .page-body-wrapper.horizontal-menu include ../../components/sidebar .page-body .container-fluid .page-header .row .col-sm-6 h3 | Bootstrap Basic Tables ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Tables li.breadcrumb-item Bootstrap Tables li.breadcrumb-item.active Basic Tables .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row .col-sm-12 .card .card-header h5 Basic Table span | Use a class code table | to any table. .table-responsive table.table thead tr th(scope='col') # th(scope='col') First Name th(scope='col') Last Name th(scope='col') Username th(scope='col') Role th(scope='col') Country tbody tr th(scope='row') 1 td Alexander td Orton td @mdorton td Admin td USA tr th(scope='row') 2 td John Deo td Deo td @johndeo td User td USA tr th(scope='row') 3 td Randy Orton td the Bird td @twitter td admin td UK tr th(scope='row') 4 td Randy Mark td Ottandy td @mdothe td user td AUS tr th(scope='row') 5 td Ram Jacob td Thornton td @twitter td admin td IND .col-sm-12 .card .card-header h5 Inverse Table span | Use a class code table-inverse | inside table element. .table-responsive table.table.table-inverse thead tr th(scope='col') # th(scope='col') First Name th(scope='col') Last Name th(scope='col') Username th(scope='col') Role th(scope='col') Country tbody tr th(scope='row') 1 td Alexander td Orton td @mdorton td Admin td USA tr th(scope='row') 2 td John Deo td Deo td @johndeo td User td USA tr th(scope='row') 3 td Randy Orton td the Bird td @twitter td admin td UK tr th(scope='row') 4 td Randy Mark td Ottandy td @mdothe td user td AUS tr th(scope='row') 5 td Ram Jacob td Thornton td @twitter td admin td IND .col-sm-12 .card .card-header h5 Inverse Table with Primary background span | Use a class code .bg-info, .bg-success, .bg-warning and .bg-danger classes. | with light text on dark backgrounds inside table element. br | To set the light background color use .bg-[color] class where [color] is the value of your selected color from stack color palette. So for teal color background class will be .bg-teal .table-responsive table.table.table-striped.bg-primary thead.tbl-strip-thad-bdr tr th(scope='col') # th(scope='col') First Name th(scope='col') Last Name th(scope='col') Username th(scope='col') Role th(scope='col') Country tbody tr th(scope='row') 1 td Alexander td Orton td @mdorton td Admin td USA tr th(scope='row') 2 td John Deo td Deo td @johndeo td User td USA tr th(scope='row') 3 td Randy Orton td the Bird td @twitter td admin td UK tr th(scope='row') 4 td Randy Mark td Ottandy td @mdothe td user td AUS tr th(scope='row') 5 td Ram Jacob td Thornton td @twitter td admin td IND .col-sm-12 .card .card-header h5 Hoverable rows span | Use a class code table-hover | to enable a hover state on table rows within a code tbody | . .table-responsive table.table.table-hover thead tr th(scope='col') # th(scope='col') First Name th(scope='col') Last Name th(scope='col') Username th(scope='col') Role th(scope='col') Country tbody tr th(scope='row') 1 td Alexander td Orton td @mdorton td Admin td USA tr th(scope='row') 2 td John Deo td Deo td @johndeo td User td USA tr th(scope='row') 3 td Randy Orton td the Bird td @twitter td admin td UK tr th(scope='row') 4 td Randy Mark td Ottandy td @mdothe td user td AUS tr th(scope='row') 5 td Ram Jacob td Thornton td @twitter td admin td IND .col-sm-12 .card .card-header h5 Contextual classes span | Use contextual classes to color table rows or individual cells. you may use Classes code table-primary | , code table-secondary | , code table-success | , code table-info | , code table-warning | , code table-danger | , code table-light | , code table-active | in code tr .table-responsive table.table thead tr th(scope='col') Class th(scope='col') Heading th(scope='col') Heading tbody tr.table-primary th(scope='row') Primary td Cell td Cell tr.table-secondary th(scope='row') Secondary td Cell td Cell tr.table-success th(scope='row') Success td Cell td Cell tr.table-info th(scope='row') Info td Cell td Cell tr.table-warning th(scope='row') Warning td Cell td Cell tr.table-danger th(scope='row') Danger td Cell td Cell tr.table-light th(scope='row') Light td Cell td Cell tr.table-active th(scope='row') Active td Cell td Cell .col-sm-12 .card .card-header h5 Text or background utilities span | Regular table background variants are not available with the inverse table, however, you may use Classes code bg-dark | , code bg-warning | , code bg-success | , code bg-info | , code bg-danger | , code bg-primary | , code bg-secondary | , code bg-light | in code td .table-responsive table.table.table-borderedfor thead tr th(scope='col') # th(scope='col') Heading th(scope='col') Heading tbody tr.table-active td.bg-primary 1 td.bg-primary primary td.bg-primary primary tr.table-active td.bg-secondary 2 td.bg-secondary secondary td.bg-secondary secondary tr td.bg-success 3 td.bg-success success td.bg-success success tr td.bg-info 4 td.bg-info info td.bg-info info tr td.bg-warning 5 td.bg-warning warning td.bg-warning warning tr td.bg-danger 6 td.bg-danger danger td.bg-danger danger tr.table-active td.bg-light 7 td.bg-light light td.bg-light light .col-sm-12 .card .card-header h5 Table head options span | Similar to tables and dark tables, use the modifier classes code .thead-dark | to make code thead | appear light or dark gray. .card-block.row .col-sm-12.col-lg-12.col-xl-12 .table-responsive table.table thead.thead-dark tr th(scope='col') # th(scope='col') First Name th(scope='col') Last Name th(scope='col') Username tbody tr th(scope='row') 1 td Mark td Otto td @mdo tr th(scope='row') 2 td Jacob td Thornton td @fat tr th(scope='row') 3 td Larry td the Bird td @twitter .col-sm-12 .card .card-header h5 Table head options span | Similar to tables and dark tables, use the modifier classes code .bg-* | and code .thead-light | to make code thead | appear light or dark gray. .card-block.row .col-sm-12.col-lg-12.col-xl-12 .table-responsive table.table thead.thead-light tr th(scope='col') # th(scope='col') First Name th(scope='col') Last Name th(scope='col') Username tbody tr th(scope='row') 1 td Mark td Otto td @mdo tr th(scope='row') 2 td Jacob td Thornton td @fat tr th(scope='row') 3 td Larry td the Bird td @twitter .col-sm-12 .card .card-header h5 Striped Row span | Use code .table-striped | to add zebra-striping to any table row within the code | . This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported. .card-block.row .col-sm-12.col-lg-12.col-xl-12 .table-responsive table.table.table-striped thead tr th(scope='col') # th(scope='col') First Name th(scope='col') Last Name th(scope='col') Username tbody tr th(scope='row') 1 td Mark td Otto td @mdo tr th(scope='row') 2 td Jacob td Thornton td @fat tr th(scope='row') 3 td Larry td the Bird td @twitter .col-sm-12 .card .card-header h5 Striped Row with Inverse Table span | Use code .table-striped | to add zebra-striping to any table row within the code | . This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported. .card-block.row .col-sm-12.col-lg-12.col-xl-12 .table-responsive table.table.table-inverse.table-striped thead tr th(scope='col') # th(scope='col') First Name th(scope='col') Last Name th(scope='col') Username tbody tr th(scope='row') 1 td Mark td Otto td @mdo tr th(scope='row') 2 td Jacob td Thornton td @fat tr th(scope='row') 3 td Larry td the Bird td @twitter .col-sm-12 .card .card-header h5 Caption span | A code <caption> | 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. .card-block.row .col-sm-12.col-lg-12.col-xl-12 .table-responsive table.table caption List of users thead tr th(scope='col') # th(scope='col') First Name th(scope='col') Last Name th(scope='col') Username tbody tr th(scope='row') 1 td Mark td Otto td @mdo tr th(scope='row') 2 td Jacob td Thornton td @fat tr th(scope='row') 3 td Larry td the Bird td @twitter .col-sm-12 .card .card-header h5 Responsive Tables span | A code <caption> | 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. .card-block.row .col-sm-12.col-lg-12.col-xl-12 .table-responsive table.table thead tr th(scope='col') # th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading tbody tr th(scope='row') 1 td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell tr th(scope='row') 2 td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell tr th(scope='row') 3 td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell td Table cell .col-sm-12 .card .card-header h5 Breckpoint Specific span | Use code .table-responsive{-sm|-md|-lg|-xl} | 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. .card-block.row .col-sm-12.col-lg-12.col-xl-12 .table-responsive table.table.table-responsive-sm thead tr th(scope='col') # th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading tbody tr th(scope='row') 1 td Table cell td Table cell td Table cell td Table cell td Table cell tr th(scope='row') 2 td Table cell td Table cell td Table cell td Table cell td Table cell tr th(scope='row') 3 td Table cell td Table cell td Table cell td Table cell td Table cell .card-block.row .col-sm-12.col-lg-12.col-xl-12 .table-responsive table.table.table-responsive-sm thead tr th(scope='col') # th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading tbody tr th(scope='row') 1 td Table cell td Table cell td Table cell td Table cell td Table cell tr th(scope='row') 2 td Table cell td Table cell td Table cell td Table cell td Table cell tr th(scope='row') 3 td Table cell td Table cell td Table cell td Table cell td Table cell .card-block.row .col-sm-12.col-lg-12.col-xl-12 .table-responsive table.table.table-responsive-sm thead tr th(scope='col') # th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading tbody tr th(scope='row') 1 td Table cell td Table cell td Table cell td Table cell td Table cell tr th(scope='row') 2 td Table cell td Table cell td Table cell td Table cell td Table cell tr th(scope='row') 3 td Table cell td Table cell td Table cell td Table cell td Table cell .card-block.row .col-sm-12.col-lg-12.col-xl-12 .table-responsive table.table.table-responsive-sm thead tr th(scope='col') # th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading th(scope='col') Table heading tbody tr th(scope='row') 1 td Table cell td Table cell td Table cell td Table cell td Table cell tr th(scope='row') 2 td Table cell td Table cell td Table cell td Table cell td Table cell tr th(scope='row') 3 td Table cell td Table cell td Table cell td Table cell td Table cell // Container-fluid Ends include ../../components/footer include ../../components/footer-files