Bootstrap Tables

  1. Tables
  2. Bootstrap Tables
CLEAN TABLE
Img Column name Ratings Progress Share 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
Img Column name Ratings Progress Share 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
Img Column name Ratings Progress Share 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
Img Column name Ratings Progress Share 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
Img Column name Ratings Progress Share 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>