zuel-itsm-3.0.2/assets/views/table_basic.html

<!-- start: PAGE TITLE -->
<section id="page-title">
	<div class="row">
		<div class="col-sm-8">
			<h1 class="mainTitle" translate="sidebar.nav.tables.BASIC">{{ mainTitle }}</h1>
			<span class="mainDescription">Refers to data arranged in rows and columns. A spreadsheet, for example, is a table. In relational database management systems, all information is stored in the form of tables. <small class="block">Webopedia - Online Tech Dictionary for IT Professionals</small></span>
		</div>
		<div ncy-breadcrumb></div>
	</div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: BASIC TABLE -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Basic <span class="text-bold">Table</span></h5>
			<p>
				For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
			</p>
			<table class="table table-hover" id="sample-table-1">
				<thead>
					<tr>
						<th class="center">#</th>
						<th>Browser</th>
						<th class="hidden-xs">Creator</th>
						<th>Software license</th>
						<th class="hidden-xs">Current layout engine</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="center">1</td>
						<td class="hidden-xs">Google Chrome</td>
						<td>Google</td>
						<td>
						<a href="#" rel="nofollow" target="_blank">
							Terms of Service
						</a></td>
						<td class="hidden-xs">Blink</td>
						<td class="center">
						<div class="visible-md visible-lg hidden-sm hidden-xs">
							<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
						</div>
						<div class="visible-xs visible-sm hidden-md hidden-lg">
							<div class="btn-group" dropdown is-open="status.isopen">
								<button type="button" class="btn btn-primary btn-o btn-sm dropdown-toggle" dropdown-toggle>
									<i class="fa fa-cog"></i>&nbsp;<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right dropdown-light" role="menu">
									<li>
										<a href="#">
											Edit
										</a>
									</li>
									<li>
										<a href="#">
											Share
										</a>
									</li>
									<li>
										<a href="#">
											Remove
										</a>
									</li>
								</ul>
							</div>
						</div></td>
					</tr>
					<tr>
						<td class="center">2</td>
						<td>Internet Explorer</td>
						<td class="hidden-xs">Microsoft, Spyglass</td>
						<td>
						<a href="#" rel="nofollow" target="_blank">
							Proprietary
						</a></td>
						<td class="hidden-xs">Trident</td>
						<td class="center">
						<div class="visible-md visible-lg hidden-sm hidden-xs">
							<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
						</div>
						<div class="visible-xs visible-sm hidden-md hidden-lg">
							<div class="btn-group" dropdown>
								<button type="button" class="btn btn-primary btn-o btn-sm dropdown-toggle" dropdown-toggle>
									<i class="fa fa-cog"></i>&nbsp;<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right dropdown-light" role="menu">
									<li>
										<a href="#">
											Edit
										</a>
									</li>
									<li>
										<a href="#">
											Share
										</a>
									</li>
									<li>
										<a href="#">
											Remove
										</a>
									</li>
								</ul>
							</div>
						</div></td>
					</tr>
					<tr>
						<td class="center">3</td>
						<td>Mozilla Firefox</td>
						<td class="hidden-xs">Mozilla Foundation</td>
						<td>
						<a href="#" rel="nofollow" target="_blank">
							MPR
						</a></td>
						<td class="hidden-xs">Gecko</td>
						<td class="center">
						<div class="visible-md visible-lg hidden-sm hidden-xs">
							<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
						</div>
						<div class="visible-xs visible-sm hidden-md hidden-lg">
							<div class="btn-group" dropdown>
								<button type="button" class="btn btn-primary btn-o btn-sm dropdown-toggle" dropdown-toggle>
									<i class="fa fa-cog"></i>&nbsp;<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right dropdown-light" role="menu">
									<li>
										<a href="#">
											Edit
										</a>
									</li>
									<li>
										<a href="#">
											Share
										</a>
									</li>
									<li>
										<a href="#">
											Remove
										</a>
									</li>
								</ul>
							</div>
						</div></td>
					</tr>
					<tr>
						<td class="center">4</td>
						<td>Safari</td>
						<td class="hidden-xs">Apple Inc.</td>
						<td>
						<a href="#" rel="nofollow" target="_blank">
							Proprietary
						</a></td>
						<td class="hidden-xs">WebKit</td>
						<td class="center">
						<div class="visible-md visible-lg hidden-sm hidden-xs">
							<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
						</div>
						<div class="visible-xs visible-sm hidden-md hidden-lg">
							<div class="btn-group" dropdown>
								<button type="button" class="btn btn-primary btn-o btn-sm dropdown-toggle" dropdown-toggle>
									<i class="fa fa-cog"></i>&nbsp;<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right dropdown-light" role="menu">
									<li>
										<a href="#">
											Edit
										</a>
									</li>
									<li>
										<a href="#">
											Share
										</a>
									</li>
									<li>
										<a href="#">
											Remove
										</a>
									</li>
								</ul>
							</div>
						</div></td>
					</tr>
					<tr>
						<td class="center">5</td>
						<td>Opera</td>
						<td class="hidden-xs">Opera Software</td>
						<td>
						<a href="#" rel="nofollow" target="_blank">
							Proprietary
						</a></td>
						<td class="hidden-xs">Presto</td>
						<td class="center">
						<div class="visible-md visible-lg hidden-sm hidden-xs">
							<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
						</div>
						<div class="visible-xs visible-sm hidden-md hidden-lg">
							<div class="btn-group" dropdown>
								<button type="button" class="btn btn-primary btn-o btn-sm dropdown-toggle" dropdown-toggle>
									<i class="fa fa-cog"></i>&nbsp;<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right dropdown-light" role="menu">
									<li>
										<a href="#">
											Edit
										</a>
									</li>
									<li>
										<a href="#">
											Share
										</a>
									</li>
									<li>
										<a href="#">
											Remove
										</a>
									</li>
								</ul>
							</div>
						</div></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<!-- end: BASIC TABLE -->
<!-- start: STRIPED ROWS -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Striped <span class="text-bold">rows</span></h5>
			<p>
				Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.
			</p>
			<table class="table table-striped table-hover" id="sample-table-2">
				<thead>
					<tr>
						<th class="center">Photo</th>
						<th>Full Name</th>
						<th class="hidden-xs">Role</th>
						<th class="hidden-xs">Email</th>
						<th class="hidden-xs">Phone</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="center"><img src="assets/images/avatar-1.jpg" class="img-rounded" alt="image"/></td>
						<td>Peter Clark</td>
						<td class="hidden-xs">UI Designer</td>
						<td class="hidden-xs">
						<a href="#" rel="nofollow" target="_blank">
							peter@example.com
						</a></td>
						<td class="hidden-xs">(641)-734-4763</td>
						<td class="center">
						<div class="visible-md visible-lg hidden-sm hidden-xs">
							<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
						</div>
						<div class="visible-xs visible-sm hidden-md hidden-lg">
							<div class="btn-group" dropdown>
								<button type="button" class="btn btn-primary btn-sm dropdown-toggle" dropdown-toggle>
									<i class="fa fa-cog"></i>&nbsp;<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right dropdown-light" role="menu">
									<li>
										<a href="#">
											Edit
										</a>
									</li>
									<li>
										<a href="#">
											Share
										</a>
									</li>
									<li>
										<a href="#">
											Remove
										</a>
									</li>
								</ul>
							</div>
						</div></td>
					</tr>
					<tr>
						<td class="center"><img src="assets/images/avatar-2.jpg" class="img-rounded" alt="image"/></td>
						<td>Nicole Bell</td>
						<td class="hidden-xs">Content Designer</td>
						<td class="hidden-xs">
						<a href="#" rel="nofollow" target="_blank">
							nicole@example.com
						</a></td>
						<td class="hidden-xs">(741)-034-4573</td>
						<td class="center">
						<div class="visible-md visible-lg hidden-sm hidden-xs">
							<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
						</div>
						<div class="visible-xs visible-sm hidden-md hidden-lg">
							<div class="btn-group" dropdown>
								<button type="button" class="btn btn-primary btn-sm dropdown-toggle" dropdown-toggle>
									<i class="fa fa-cog"></i>&nbsp;<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right dropdown-light" role="menu">
									<li>
										<a href="#">
											Edit
										</a>
									</li>
									<li>
										<a href="#">
											Share
										</a>
									</li>
									<li>
										<a href="#">
											Remove
										</a>
									</li>
								</ul>
							</div>
						</div></td>
					</tr>
					<tr>
						<td class="center"><img src="assets/images/avatar-3.jpg" class="img-rounded" alt="image"/></td>
						<td>Steven Thompson</td>
						<td class="hidden-xs">Visual Designer</td>
						<td class="hidden-xs">
						<a href="#" rel="nofollow" target="_blank">
							steven@example.com
						</a></td>
						<td class="hidden-xs">(471)-543-4073</td>
						<td class="center">
						<div class="visible-md visible-lg hidden-sm hidden-xs">
							<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
						</div>
						<div class="visible-xs visible-sm hidden-md hidden-lg">
							<div class="btn-group" dropdown>
								<button type="button" class="btn btn-primary btn-sm dropdown-toggle" dropdown-toggle>
									<i class="fa fa-cog"></i>&nbsp;<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right dropdown-light" role="menu">
									<li>
										<a href="#">
											Edit
										</a>
									</li>
									<li>
										<a href="#">
											Share
										</a>
									</li>
									<li>
										<a href="#">
											Remove
										</a>
									</li>
								</ul>
							</div>
						</div></td>
					</tr>
					<tr>
						<td class="center"><img src="assets/images/avatar-4.jpg" class="img-rounded" alt="image"/></td>
						<td>Ella Patterson</td>
						<td class="hidden-xs">Web Editor</td>
						<td class="hidden-xs">
						<a href="#" rel="nofollow" target="_blank">
							ella@example.com
						</a></td>
						<td class="hidden-xs">(799)-994-9999</td>
						<td class="center">
						<div class="visible-md visible-lg hidden-sm hidden-xs">
							<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
						</div>
						<div class="visible-xs visible-sm hidden-md hidden-lg">
							<div class="btn-group" dropdown>
								<button type="button" class="btn btn-primary btn-sm dropdown-toggle" dropdown-toggle>
									<i class="fa fa-cog"></i>&nbsp;<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right dropdown-light" role="menu">
									<li>
										<a href="#">
											Edit
										</a>
									</li>
									<li>
										<a href="#">
											Share
										</a>
									</li>
									<li>
										<a href="#">
											Remove
										</a>
									</li>
								</ul>
							</div>
						</div></td>
					</tr>
					<tr>
						<td class="center"><img src="assets/images/avatar-5.jpg" class="img-rounded" alt="image"/></td>
						<td>Kenneth Ross</td>
						<td class="hidden-xs">Senior Designer</td>
						<td class="hidden-xs">
						<a href="#" rel="nofollow" target="_blank">
							kenneth@example.com
						</a></td>
						<td class="hidden-xs">(111)-114-1173</td>
						<td class="center">
						<div class="visible-md visible-lg hidden-sm hidden-xs">
							<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
							<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
						</div>
						<div class="visible-xs visible-sm hidden-md hidden-lg">
							<div class="btn-group" dropdown>
								<button type="button" class="btn btn-primary btn-sm dropdown-toggle" dropdown-toggle>
									<i class="fa fa-cog"></i>&nbsp;<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right dropdown-light" role="menu">
									<li>
										<a href="#">
											Edit
										</a>
									</li>
									<li>
										<a href="#">
											Share
										</a>
									</li>
									<li>
										<a href="#">
											Remove
										</a>
									</li>
								</ul>
							</div>
						</div></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<!-- end: STRIPED ROWS -->
<!-- start: CONDENSED TABLE -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-6">
			<h5 class="over-title margin-bottom-15">Condensed <span class="text-bold">table</span></h5>
			<p>
				Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.
			</p>
			<table class="table table-condensed table-hover" id="sample-table-3">
				<thead>
					<tr>
						<th class="hidden-xs">Clicks</th>
						<th><i class="fa fa-time"></i> Update </th>
						<th class="hidden-xs">Status</th>
						<th class="hidden-xs"></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
						<a href="#">
							alpha.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Feb 13</td>
						<td class="hidden-xs"><span class="label label-sm label-warning">Expiring</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							beta.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Jen 15</td>
						<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							gamma.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Mar 09</td>
						<td class="hidden-xs"><span class="label label-sm label-danger">Expired</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							delta.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Feb 10</td>
						<td class="hidden-xs"><span class="label label-sm label-inverse">Flagged</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							epsilon.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Feb 18</td>
						<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							zeta.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Feb 13</td>
						<td class="hidden-xs"><span class="label label-sm label-warning">Expiring</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							eta.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Jen 15</td>
						<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							theta.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Mar 09</td>
						<td class="hidden-xs"><span class="label label-sm label-danger">Expired</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							iota.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Feb 10</td>
						<td class="hidden-xs"><span class="label label-sm label-inverse">Flagged</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							kappa.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Feb 18</td>
						<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="col-md-6">
			<h5 class="over-title margin-bottom-15">Bordered <span class="text-bold">table</span></h5>
			<p>
				Add <code>.table-bordered</code> for borders on all sides of the table and cells.
			</p>
			<table class="table table-bordered table-hover" id="sample-table-4">
				<thead>
					<tr>
						<th>Domain</th>
						<th class="hidden-xs">Clicks</th>
						<th><i class="fa fa-time"></i> Update </th>
						<th class="hidden-xs">Status</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
						<a href="#">
							alpha.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Feb 13</td>
						<td class="hidden-xs"><span class="label label-sm label-warning">Expiring</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							beta.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Jen 15</td>
						<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							gamma.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Mar 09</td>
						<td class="hidden-xs"><span class="label label-sm label-danger">Expired</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							delta.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Feb 10</td>
						<td class="hidden-xs"><span class="label label-sm label-inverse">Flagged</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							epsilon.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Feb 18</td>
						<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							zeta.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Feb 13</td>
						<td class="hidden-xs"><span class="label label-sm label-warning">Expiring</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							eta.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Jen 15</td>
						<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							theta.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Mar 09</td>
						<td class="hidden-xs"><span class="label label-sm label-danger">Expired</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							iota.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Feb 10</td>
						<td class="hidden-xs"><span class="label label-sm label-inverse">Flagged</span></td>
					</tr>
					<tr>
						<td>
						<a href="#">
							kappa.com
						</a></td>
						<td class="hidden-xs">3,330</td>
						<td>Feb 18</td>
						<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<!-- end: CONDENSED TABLE -->
<!-- start: CONTEXTUAL CLASSES -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Contextual <span class="text-bold">classes</span></h5>
			<p>
				Use contextual classes to color table rows or individual cells.
			</p>
			<table class="table">
				<thead>
					<tr>
						<th>#</th>
						<th>Column heading</th>
						<th>Column heading</th>
						<th>Column heading</th>
					</tr>
				</thead>
				<tbody>
					<tr class="active">
						<th scope="row">1</th>
						<td>Column content</td>
						<td>Column content</td>
						<td>Column content</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>Column content</td>
						<td>Column content</td>
						<td>Column content</td>
					</tr>
					<tr class="success">
						<th scope="row">3</th>
						<td>Column content</td>
						<td>Column content</td>
						<td>Column content</td>
					</tr>
					<tr>
						<th scope="row">4</th>
						<td>Column content</td>
						<td>Column content</td>
						<td>Column content</td>
					</tr>
					<tr class="info">
						<th scope="row">5</th>
						<td>Column content</td>
						<td>Column content</td>
						<td>Column content</td>
					</tr>
					<tr>
						<th scope="row">6</th>
						<td>Column content</td>
						<td>Column content</td>
						<td>Column content</td>
					</tr>
					<tr class="warning">
						<th scope="row">7</th>
						<td>Column content</td>
						<td>Column content</td>
						<td>Column content</td>
					</tr>
					<tr>
						<th scope="row">8</th>
						<td>Column content</td>
						<td>Column content</td>
						<td>Column content</td>
					</tr>
					<tr class="danger">
						<th scope="row">9</th>
						<td>Column content</td>
						<td>Column content</td>
						<td>Column content</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<!-- end: CONTEXTUAL CLASSES -->