• Email
    • Chat
    • Feather Icon
    • Widgets

    • You have 3 Notifications4

    • Delivery processing

      10 minutes ago

    • Order Complete

      1 hour ago

    • Tickets Generated

      3 hour ago

    • Delivery Complete

      6 hour ago
    • Ain Chavez

      Lorem Ipsum is simply dummy...

      32 mins ago

    • Erica Hughes

      Lorem Ipsum is simply dummy...

      58 mins ago

    • Kori Thomas

      Lorem Ipsum is simply dummy...

      1 hr ago

    • See All
New
Emay Walter

Human Resources Department

  • 19.8k

    Follow

  • 2 year

    Experince

  • 95.2k

    Follower

Bootstrap Border Table

  1. Home
  2. Tables
  3. Bootstrap Tables
  4. Border Tables
Horizontal Borders
Example of horizontal table borders. This is a default table border style attached to .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 .table-border-horizontalclass added to the table with .tableclass.
# First Name Last Name Username Role Country
1 Alexander Orton @mdorton Admin USA
2 John Deo Deo @johndeo User USA
3 Randy Orton the Bird @twitter admin UK
4 Randy Mark Ottandy @mdothe user AUS
5 Ram Jacob Thornton @twitter admin IND
Vertical Borders
Example of Vertical table borders. This is a default table border style attached to .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 .table-border-verticalclass added to the table with .tableclass.
# First Name Last Name Username Role Country
1 Alexander Orton @mdorton Admin USA
2 John Deo Deo @johndeo User USA
3 Randy Orton the Bird @twitter admin UK
4 Randy Mark Ottandy @mdothe user AUS
5 Ram Jacob Thornton @twitter admin IND
Both Bordeds
Example of horizontal table borders. This is a default table border style attached to .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 .table-borderedclass added to the table with .tableclass.
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
Borderless Table
Example of horizontal table borders. This is a default table border style attached to .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 .table-bordernoneclass added to the table with .tableclass.
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
Default Table Border
Example of Default Table Border.This is a default table border style attached to .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 .tableclass added to the table with .tableclass.
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
Solid Border
Example of a solid border inside table thead. This border inherits all styling options from the default border style, the only difference is it has 2px width. Sometimes it could be useful for visual separation and addition highlight. To use this border add .border-solid to the table head row. This border style works only with row borders.
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
Double Border
Example of a double border inside table head. This border has 3px width, double style and inherits all styling options from the default border style. Visually it displays table head and body as 2 separated table areas. To use this border add .border-double to the table head row.
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
Dotted Border
Example of a dotted border inside table head. This border has 3px width, dotted style and inherits all styling options from the default border style. Visually it displays table head and body as 2 separated table areas. To use this border add .border-dotted to the table head row.
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
Dashed Border
Example of a dashed border inside table head. This border has 3px width, dashed style and inherits all styling options from the default border style. Visually it displays table head and body as 2 separated table areas. To use this border add .border-dashed to the table head row.
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
Border Bottom Color
EExample of a table head border withcustom color. According to the custom color system options, you can set any of predefined colors by adding .border-bottom-* class to the table head row. This technique works with all border styles demonstrated above.
# First Name Last Name Username
3 Jacob Thornton @fat
3 Jacob Thornton @fat
3 Jacob Thornton @fat
3 Jacob Thornton @fat
3 Jacob Thornton @fat
3 Jacob Thornton @fat