0%
Loading...
Ross C. Lopez

#### Basic Tables

January 2018

#### Basic Table

Add class `.table`

Source Code

# | First | Last | Handle | Tag
--- | --- | --- | --- | ---
1 | Mark | Otto | @mdo | Primary
2 | Jacob | Thornton | @fat | Secondary
3 | Larry | the Bird | @twitter | Success

Copy Code Hide Code

          #

          1

#### Bordered table

Add `.table .table-bordered` for borders on all sides of the table and cells.

Source Code

# | First | Last | Handle | Tag
--- | --- | --- | --- | ---
1 | Mark | Otto | @mdo | Primary
2 | Jacob | Thornton | @fat | Secondary
3 | Larry | the Bird | @twitter | Success

Copy Code Hide Code

          #

          1

#### Striped table

Add `.table .table-striped` to add zebra-striping to any table row within the `<tbody>`.

Source Code

# | First | Last | Handle | Tag
--- | --- | --- | --- | ---
1 | Mark | Otto | @mdo | Primary
2 | Jacob | Thornton | @fat | Secondary
3 | Larry | the Bird | @twitter | Success
2 | Jacob | Thornton | @fat | Secondary
3 | Larry | the Bird | @twitter | Success

Copy Code Hide Code

          #

          1

#### Responsive table

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table .table-responsive` Or, pick a maximum breakpoint with which to have a responsive table up to by using`.table-responsive{-sm|-md|-lg|-xl}`.

Source Code

# | First | Last | Handle | Tag
--- | --- | --- | --- | ---
1 | Mark | Otto | @mdo | Primary
2 | Jacob | Thornton | @fat | Secondary
3 | Larry | the Bird | @twitter | Success
2 | Jacob | Thornton | @fat | Secondary
3 | Larry | the Bird | @twitter | Success

Copy Code Hide Code

    	      #

    	      1

#### Contextual classes

Use classes `( .table-active, .table-success, .table-info, .table-warning, .table-danger )` to color table rows or individual cells

Source Code

# | First | Last | Handle | Tag
--- | --- | --- | --- | ---
1 | Mark | Otto | @mdo | Primary
2 | Jacob | Thornton | @fat | Secondary
3 | Larry | the Bird | @twitter | Success
2 | Jacob | Thornton | @fat | Secondary
3 | Larry | the Bird | @twitter | Success
3 | Larry | the Bird | @twitter | Success
3 | Larry | the Bird | @twitter | Success
3 | Larry | the Bird | @twitter | Success
3 | Larry | the Bird | @twitter | Success

Copy Code Hide Code

DeskApp - Bootstrap 4 Admin Template By Ankit Hingarajiya