Layout Settings User Interface Settings

Header Background

White Dark

Sidebar Background

White Dark

Menu Dropdown Icon

Menu List Icon

Basic Tables

January 2018
Export List Policies View Assets

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 

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
    </tr>
  </tbody>
</table>

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 

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
    </tr>
  </tbody>
</table>

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 

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
    </tr>
  </tbody>
</table>

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 

<div class="table-responsive">
	<table class="table table-striped">
	  <thead>
	    <tr>
	      <th scope="col">#</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr>
	      <th scope="row">1</th>
	    </tr>
	  </tbody>
	</table>
</div>

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 

<div class="table-responsive">
	<table class="table table-striped">
	  <tbody>
	    <tr class="table-active"><td></td></tr>
		<tr class="table-primary"><td></td></tr>
		<tr class="table-secondary"><td></td></tr>
		<tr class="table-success"><td></td></tr>
		<tr class="table-danger"><td></td></tr>
		<tr class="table-warning"><td></td></tr>
		<tr class="table-info"><td></td></tr>
		<tr class="table-light"><td></td></tr>
		<tr class="table-dark"><td></td></tr>
	  </tbody>
	</table>
</div>
DeskApp - Bootstrap 4 Admin Template By Ankit Hingarajiya