- 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