Need Help ?

Submit enquiry here Buy Now

Bootstrap Border Table

  2. Bootstrap Tables
  3. Bootstrap Border Table
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 4px width, Just addtable-double with table for this default table.
# 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 2px width, Just addtable-dotted with table for this default table.
# 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 2px width, Just addtable-dashed with table for this default table.
# 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
1 Jacob Thornton @fat
2 Jacob Thornton @fat
3 Jacob Thornton @fat
4 Jacob Thornton @fat
5 Jacob Thornton @fat
6 Jacob Thornton @fat