Jais Admin - Administrator Template

Bootstrap Tables

Tables / Bootstrap Tables

CLEAN TABLE

Column name	Progress	Column name
Value 1	80% Complete	Approved
Value 2	80% Complete	Pending
Value 3	80% Complete	Suspended
Value 4	80% Complete	Blocked
Value 5	80% Complete	N/A
Value 6	80% Complete	Edit Delete

Show Code

<div class="table-responsive">
	<table class="table table-bordered nomargin">
		<thead>
			<tr>
				<th>Column name</th>
				<th>Column name</th>
				<th>Column name</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td><span class="label label-success">Approved </span></td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td><span class="label label-info">Pending </span></td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td><span class="label label-warning">Suspended </span></td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td><span class="label label-danger">Blocked </span></td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td><span class="label label-primary">N/A </span></td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>
					<a href="#" class="btn btn-default btn-xs"><i class="fa fa-edit white"></i> Edit </a>
					<a href="#" class="btn btn-default btn-xs"><i class="fa fa-times white"></i> Delete </a>
				</td>
			</tr>
		</tbody>
	</table>
</div>

HOVER TABLE

Column name	Progress	Column name
Value 1	80% Complete	Approved
Value 2	80% Complete	Pending
Value 3	80% Complete	Suspended
Value 4	80% Complete	Blocked
Value 5	80% Complete	N/A
Value 6	80% Complete	Edit Delete

Show Code

<div class="table-responsive">
	<table class="table table-hover nomargin">
		<thead>
			<tr>
				<th>Column name</th>
				<th>Column name</th>
				<th>Column name</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
		</tbody>
	</table>
</div>

STRIPPED TABLE

Column name	Progress	Column name
Value 1	80% Complete	Approved
Value 2	80% Complete	Pending
Value 3	80% Complete	Suspended
Value 4	80% Complete	Blocked
Value 5	80% Complete	N/A
Value 6	80% Complete	Edit Delete

Show Code

<div class="table-responsive nomargin">
	<table class="table table-bordered table-striped">
		<thead>
			<tr>
				<th><i class="fa fa-building pull-right hidden-xs"></i> Column name</th>
				<th><i class="fa fa-calendar pull-right hidden-xs"></i> Column name</th>
				<th><i class="glyphicon glyphicon-send pull-right hidden-xs"></i> Column name</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
		</tbody>
	</table>
</div>

COLOR TABLE

Column name	Progress	Column name
Value 1	80% Complete	Approved
Value 2	80% Complete	Pending
Value 3	80% Complete	Suspended
Value 4	80% Complete	Blocked
Value 5	80% Complete	N/A
Value 6	80% Complete	Edit Delete

Show Code

<div class="table-responsive">
	<table class="table nomargin">
		<thead>
			<tr>
				<th><i class="fa fa-building"></i> Column name</th>
				<th><i class="fa fa-calendar"></i> Column name</th>
				<th><i class="glyphicon glyphicon-send"></i> Column name</th>
			</tr>
		</thead>
		<tbody>
			<tr class="success">
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr class="warning">
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr class="danger">
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr class="info">
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr class="active">
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
		</tbody>
	</table>
</div>

CONDENSED TABLE

Column name	Progress	Column name
Value 1	80% Complete	Approved
Value 2	80% Complete	Pending
Value 3	80% Complete	Suspended
Value 4	80% Complete	Blocked
Value 5	80% Complete	N/A
Value 6	80% Complete	Edit Delete

Show Code

<div class="table-responsive">
	<table class="table table-condensed nomargin">
		<thead>
			<tr>
				<th>Column name</th>
				<th>Column name</th>
				<th>Column name</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>Value 3</td>
			</tr>
		</tbody>
	</table>
</div>