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>