- 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 Border Table
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Tables
li.breadcrumb-item Bootstrap Tables
li.breadcrumb-item.active Border Tables
.col-sm-6
include ../../components/bookmark
// Container-fluid starts
.container-fluid
.row
.col-sm-12
.card
.card-header
h5 Horizontal Borders
span
| Example of
code horizontal
| table borders. This is a default table border style attached to
code .table
| class.All borders have the same grey color and style, table itself doesn't have a border, but you can add this border using
code .table-border-horizontal
| class added to the table with
code .table
| class.
.table-responsive
table.table.table-border-horizontal
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 Vertical Borders
span
| Example of
code Vertical
| table borders. This is a default table border style attached to
code .table
| class.All borders have the same grey color and style, table itself doesn't have a border, but you can add this border using
code .table-border-vertical
| class added to the table with
code .table
| class.
.table-responsive
table.table.table-border-vertical
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 Both Bordeds
span
| Example of
code horizontal
| table borders. This is a default table border style attached to
code .table
| class.All borders have the same grey color and style, table itself doesn't have a border, but you can add this border using
code .table-bordered
| class added to the table with
code .table
| class.
.table-responsive
table.table.table-bordered
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 Mark
td Otto
td @TwBootstrap
tr
th(scope='row') 3
td Jacob
td Thornton
td @fat
.col-sm-12
.card
.card-header
h5 Borderless Table
span
| Example of
code horizontal
| table borders. This is a default table border style attached to
code .table
| class.All borders have the same grey color and style, table itself doesn't have a border, but you can add this border using
code .table-bordernone
| class added to the table with
code .table
| class.
.table-responsive
table.table.table-bordernone
thead
tr
th(scope='col') #
th(scope='col') First Name
th(scope='col') Last Name
th(scope='col') Username
tbody
tr
th.bd-t-none(scope='row') 1
td Mark
td Otto
td @mdo
tr
th.bd-t-none(scope='row') 2
td Mark
td Otto
td @TwBootstrap
tr
th.bd-t-none(scope='row') 3
td Jacob
td Thornton
td @fat
.col-sm-12
.card
.card-header
h5 Default Table Border
span
| Example of
code Default Table Border
| .This is a default table border style attached to
code .table
| class.All borders have the same grey color and style, table itself doesn't have a border, but you can add this border using
code .table
| class added to the table with
code .table
| class.
.table-responsive
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 Mark
td Otto
td @TwBootstrap
tr
th(scope='row') 3
td Jacob
td Thornton
td @fat
.col-sm-12
.card
.card-header
h5 Solid Border
span
| Example of a
code solid
| border inside table
code thead
| . This border inherits all styling options from the default border style, the only difference is it has
code 2px
| width. Sometimes it could be useful for visual separation and addition highlight. To use this border add
code .border-solid
| to the table head row. This border style works only with row borders.
.table-responsive
table.table
thead
tr.border-solid
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 Mark
td Otto
td @TwBootstrap
tr
th(scope='row') 3
td Jacob
td Thornton
td @fat
.col-sm-12
.card
.card-header
h5 Double Border
span
| Example of a
code double
| border inside table head. This border has
code 3px
| width,
code double
| style and inherits all styling options from the default border style. Visually it displays table
code head
| and
code body
| as 2 separated table areas. To use this border add
code .border-double
| to the table head row.
.table-responsive
table.table
thead
tr.double
th(scope='col') #
th(scope='col') First Name
th(scope='col') Last Name
th(scope='col') Username
tbody
tr.double
th(scope='row') 1
td Mark
td Otto
td @mdo
tr.double
th(scope='row') 2
td Mark
td Otto
td @TwBootstrap
tr.double
th(scope='row') 3
td Jacob
td Thornton
td @fat
.col-sm-12
.card
.card-header
h5 Dotted Border
span
| Example of a
code dotted
| border inside table head. This border has
code 3px
| width,
code dotted
| style and inherits all styling options from the default border style. Visually it displays table
code head
| and
code body
| as 2 separated table areas. To use this border add
code .border-dotted
| to the table head row.
.table-responsive
table.table
thead
tr.dotted
th(scope='col') #
th(scope='col') First Name
th(scope='col') Last Name
th(scope='col') Username
tbody
tr.dotted
th(scope='row') 1
td Mark
td Otto
td @mdo
tr.dotted
th(scope='row') 2
td Mark
td Otto
td @TwBootstrap
tr.dotted
th(scope='row') 3
td Jacob
td Thornton
td @fat
.col-sm-12
.card
.card-header
h5 Dashed Border
span
| Example of a
code dashed
| border inside table head. This border has
code 3px
| width,
code dashed
| style and inherits all styling options from the default border style. Visually it displays table
code head
| and
code body
| as 2 separated table areas. To use this border add
code .border-dashed
| to the table head row.
.table-responsive
table.table
thead
tr.dashed
th(scope='col') #
th(scope='col') First Name
th(scope='col') Last Name
th(scope='col') Username
tbody
tr.dashed
th(scope='row') 1
td Mark
td Otto
td @mdo
tr.dashed
th(scope='row') 2
td Mark
td Otto
td @TwBootstrap
tr.dashed
th(scope='row') 3
td Jacob
td Thornton
td @fat
.col-sm-12
.card
.card-header
h5 Border Bottom Color
span
| EExample of a table head border with
code custom
| color. According to the custom color system options, you can set any of predefined colors by adding
code .border-bottom-*
| class to the table head row. This technique works with all border styles demonstrated above.
.table-responsive
table.table
thead
tr.border-bottom-primary
th(scope='col') #
th(scope='col') First Name
th(scope='col') Last Name
th(scope='col') Username
tbody
tr.border-bottom-secondary
th(scope='row') 3
td Jacob
td Thornton
td @fat
tr.border-bottom-success
th(scope='row') 3
td Jacob
td Thornton
td @fat
tr.border-bottom-info
th(scope='row') 3
td Jacob
td Thornton
td @fat
tr.border-bottom-warning
th(scope='row') 3
td Jacob
td Thornton
td @fat
tr.border-bottom-danger
th(scope='row') 3
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td Jacob
td Thornton
td @fat
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files