WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

BOOTSTRAP TABLES

  1. Home
  2. Shortcodes
  3. 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">
		<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="badge badge-success">Approved </span></td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td><span class="badge badge-info">Pending </span></td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td><span class="badge badge-warning">Suspended </span></td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td><span class="badge badge-danger">Blocked </span></td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td><span class="badge badge-primary">N/A </span></td>
			</tr>
			<tr>
				<td>Value 1</td>
				<td>Value 2</td>
				<td>
					<a href="#" class="btn btn-default btn-sm"><i class="fa fa-edit white"></i> Edit </a>
					<a href="#" class="btn btn-default btn-sm"><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">
		<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">
	<table class="table table-bordered table-striped">
		<thead>
			<tr>
				<th><i class="fa fa-building float-right hidden-xs-down"></i> Column name</th>
				<th><i class="fa fa-calendar float-right hidden-xs-down"></i> Column name</th>
				<th><i class="glyphicon glyphicon-send float-right hidden-xs-down"></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">
		<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-sm">
		<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>