- 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