- var theme_customizer = true;
- var tooltip = 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 Styling Tables
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Tables
li.breadcrumb-item Bootstrap Tables
li.breadcrumb-item.active Styling Tables
.col-sm-6
include ../../components/bookmark
// Container-fluid starts
.container-fluid
.row
.col-sm-12
.card
.card-header
h5 Defult Styling
span
| use class
code table table-styling
| inside table element
.card-block.row
.col-sm-12.col-lg-12.col-xl-12
.table-responsive
table.table.table-styling
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 Table head options
span
| Use class
code .table-primary
| inside thead tr element.
.card-block.row
.col-sm-12.col-lg-12.col-xl-12
.table-responsive
table.table
thead.table-primary
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 With Primary Background
span
| Use background classes
code .bg-*
| and
code table-primary
| ,
code table-secondary
| ,
code table-success
| ,
code table-danger
| ,
code table-info
| ,
code table-warning
| to make custom
code thead
| background. You can also use Stack Admin color palette classes for background.
.card-block.row
.col-sm-12.col-lg-12.col-xl-12
.table-responsive
table.table
thead.bg-primary
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
.card-block.row
.col-sm-12.col-lg-12.col-xl-12
.table-responsive
table.table
thead.table-success
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 Footer Styling
span
| Use class
code table-info
| ,
code table-success
| ,
code table-success
| ,
code table-info
| ,
code table-danger
| ,
code table-primary
| ,
code table-secondary
| ,
code table-light
| ,
code table-active
| and also use
code bg-*
| inside tfoot element.
.card-block.row
.col-sm-12.col-lg-12.col-xl-12
.table-responsive.table-border-radius
table.table
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
tfoot.table-success
tr
th(scope='row') 3
td Larry
td the Bird
td @twitter
.col-sm-12
.card
.card-header
h5 Custom Table Color
span
| Use class
code table-*
| inside table element.
.card-block.row
.col-sm-12.col-lg-12.col-xl-12
.table-responsive.table-border-radius
table.table.table-styling.table-primary
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 Jacob
td Thornton
td @fat
.col-sm-12
.card
.card-header
h5 Custom Table Color with Hover and Stripped
span
| Use class
code table-hover, table-striped table-*
code table-info
| ,
code table-success
| ,
code table-success
| ,
code table-info
| ,
code table-danger
| ,
code table-primary
| ,
code table-secondary
| ,
code table-light
| ,
code table-active
| inside table element.
.card-block.row
.col-sm-12.col-lg-12.col-xl-12
.table-responsive.table-border-radius
table.table.table-styling.table-hover.table-striped.table-primary
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
tr
th(scope='row') 3
td Larry
td the Bird
td @twitter
tr
th(scope='row') 3
td Larry
td the Bird
td @twitter
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files