Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

Examples #

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table> , then extend with custom styles or our various included modifier classes.

Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4 , meaning any nested tables will be styled in the same manner as the parent.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
																			  <thead>
																			    <tr>
																			      <th scope="col">#</th>
																			      <th scope="col">First</th>
																			      <th scope="col">Last</th>
																			      <th scope="col">Handle</th>
																			    </tr>
																			  </thead>
																			  <tbody>
																			    <tr>
																			      <th scope="row">1</th>
																			      <td>Mark</td>
																			      <td>Otto</td>
																			      <td>@mdo</td>
																			    </tr>
																			    <tr>
																			      <th scope="row">2</th>
																			      <td>Jacob</td>
																			      <td>Thornton</td>
																			      <td>@fat</td>
																			    </tr>
																			    <tr>
																			      <th scope="row">3</th>
																			      <td>Larry</td>
																			      <td>the Bird</td>
																			      <td>@twitter</td>
																			    </tr>
																			  </tbody>
																			</table>

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-dark">
																			  <thead>
																			    <tr>
																			      <th scope="col">#</th>
																			      <th scope="col">First</th>
																			      <th scope="col">Last</th>
																			      <th scope="col">Handle</th>
																			    </tr>
																			  </thead>
																			  <tbody>
																			    <tr>
																			      <th scope="row">1</th>
																			      <td>Mark</td>
																			      <td>Otto</td>
																			      <td>@mdo</td>
																			    </tr>
																			    <tr>
																			      <th scope="row">2</th>
																			      <td>Jacob</td>
																			      <td>Thornton</td>
																			      <td>@fat</td>
																			    </tr>
																			    <tr>
																			      <th scope="row">3</th>
																			      <td>Larry</td>
																			      <td>the Bird</td>
																			      <td>@twitter</td>
																			    </tr>
																			  </tbody>
																			</table>

Table head options #

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <table> s appear light or dark gray.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
																			  <thead class="thead-dark">
																			    <tr>
																			      <th scope="col">#</th>
																			      <th scope="col">First</th>
																			      <th scope="col">Last</th>
																			      <th scope="col">Handle</th>
																			    </tr>
																			  </thead>
																			  <tbody>
																			    <tr>
																			      <th scope="row">1</th>
																			      <td>Mark</td>
																			      <td>Otto</td>
																			      <td>@mdo</td>
																			    </tr>
																			    <tr>
																			      <th scope="row">2</th>
																			      <td>Jacob</td>
																			      <td>Thornton</td>
																			      <td>@fat</td>
																			    </tr>
																			    <tr>
																			      <th scope="row">3</th>
																			      <td>Larry</td>
																			      <td>the Bird</td>
																			      <td>@twitter</td>
																			    </tr>
																			  </tbody>
																			</table>

																			<table class="table">
																			  <thead class="thead-light">
																			    <tr>
																			      <th scope="col">#</th>
																			      <th scope="col">First</th>
																			      <th scope="col">Last</th>
																			      <th scope="col">Handle</th>
																			    </tr>
																			  </thead>
																			  <tbody>
																			    <tr>
																			      <th scope="row">1</th>
																			      <td>Mark</td>
																			      <td>Otto</td>
																			      <td>@mdo</td>
																			    </tr>
																			    <tr>
																			      <th scope="row">2</th>
																			      <td>Jacob</td>
																			      <td>Thornton</td>
																			      <td>@fat</td>
																			    </tr>
																			    <tr>
																			      <th scope="row">3</th>
																			      <td>Larry</td>
																			      <td>the Bird</td>
																			      <td>@twitter</td>
																			    </tr>
																			  </tbody>
																			</table>

Striped rows #

Use .table-striped to add zebra-striping to any table row within the <tbody> .

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
																				  <thead>
																				    <tr>
																				      <th scope="col">#</th>
																				      <th scope="col">First</th>
																				      <th scope="col">Last</th>
																				      <th scope="col">Handle</th>
																				    </tr>
																				  </thead>
																				  <tbody>
																				    <tr>
																				      <th scope="row">1</th>
																				      <td>Mark</td>
																				      <td>Otto</td>
																				      <td>@mdo</td>
																				    </tr>
																				    <tr>
																				      <th scope="row">2</th>
																				      <td>Jacob</td>
																				      <td>Thornton</td>
																				      <td>@fat</td>
																				    </tr>
																				    <tr>
																				      <th scope="row">3</th>
																				      <td>Larry</td>
																				      <td>the Bird</td>
																				      <td>@twitter</td>
																				    </tr>
																				  </tbody>
																				</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped table-dark">
																				  <thead>
																				    <tr>
																				      <th scope="col">#</th>
																				      <th scope="col">First</th>
																				      <th scope="col">Last</th>
																				      <th scope="col">Handle</th>
																				    </tr>
																				  </thead>
																				  <tbody>
																				    <tr>
																				      <th scope="row">1</th>
																				      <td>Mark</td>
																				      <td>Otto</td>
																				      <td>@mdo</td>
																				    </tr>
																				    <tr>
																				      <th scope="row">2</th>
																				      <td>Jacob</td>
																				      <td>Thornton</td>
																				      <td>@fat</td>
																				    </tr>
																				    <tr>
																				      <th scope="row">3</th>
																				      <td>Larry</td>
																				      <td>the Bird</td>
																				      <td>@twitter</td>
																				    </tr>
																				  </tbody>
																				</table>

Bordered table #

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
																			  <thead>
																			    <tr>
																			      <th scope="col">#</th>
																			      <th scope="col">First</th>
																			      <th scope="col">Last</th>
																			      <th scope="col">Handle</th>
																			    </tr>
																			  </thead>
																			  <tbody>
																			    <tr>
																			      <th scope="row">1</th>
																			      <td>Mark</td>
																			      <td>Otto</td>
																			      <td>@mdo</td>
																			    </tr>
																			    <tr>
																			      <th scope="row">2</th>
																			      <td>Jacob</td>
																			      <td>Thornton</td>
																			      <td>@fat</td>
																			    </tr>
																			    <tr>
																			      <th scope="row">3</th>
																			      <td colspan="2">Larry the Bird</td>
																			      <td>@twitter</td>
																			    </tr>
																			  </tbody>
																			</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered table-dark">
																				  <thead>
																				    <tr>
																				      <th scope="col">#</th>
																				      <th scope="col">First</th>
																				      <th scope="col">Last</th>
																				      <th scope="col">Handle</th>
																				    </tr>
																				  </thead>
																				  <tbody>
																				    <tr>
																				      <th scope="row">1</th>
																				      <td>Mark</td>
																				      <td>Otto</td>
																				      <td>@mdo</td>
																				    </tr>
																				    <tr>
																				      <th scope="row">2</th>
																				      <td>Jacob</td>
																				      <td>Thornton</td>
																				      <td>@fat</td>
																				    </tr>
																				    <tr>
																				      <th scope="row">3</th>
																				      <td>Larry</td>
																				      <td>the Bird</td>
																				      <td>@twitter</td>
																				    </tr>
																				  </tbody>
																				</table>

Borderless table #

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-borderless">
																			  <thead>
																			    <tr>
																			      <th scope="col">#</th>
																			      <th scope="col">First</th>
																			      <th scope="col">Last</th>
																			      <th scope="col">Handle</th>
																			    </tr>
																			  </thead>
																			  <tbody>
																			    <tr>
																			      <th scope="row">1</th>
																			      <td>Mark</td>
																			      <td>Otto</td>
																			      <td>@mdo</td>
																			    </tr>
																			    <tr>
																			      <th scope="row">2</th>
																			      <td>Jacob</td>
																			      <td>Thornton</td>
																			      <td>@fat</td>
																			    </tr>
																			    <tr>
																			      <th scope="row">3</th>
																			      <td colspan="2">Larry the Bird</td>
																			      <td>@twitter</td>
																			    </tr>
																			  </tbody>
																			</table>

Hoverable rows #

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover table-white">
													  <thead>
													    <tr>
													      <th scope="col">#</th>
													      <th scope="col">First</th>
													      <th scope="col">Last</th>
													      <th scope="col">Handle</th>
													    </tr>
													  </thead>
													  <tbody>
													    <tr>
													      <th scope="row">1</th>
													      <td>Mark</td>
													      <td>Otto</td>
													      <td>@mdo</td>
													    </tr>
													    <tr>
													      <th scope="row">2</th>
													      <td>Jacob</td>
													      <td>Thornton</td>
													      <td>@fat</td>
													    </tr>
													    <tr>
													      <th scope="row">3</th>
													      <td colspan="2">Larry the Bird</td>
													      <td>@twitter</td>
													    </tr>
													  </tbody>
													</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover table-dark">
													  <thead>
													    <tr>
													      <th scope="col">#</th>
													      <th scope="col">First</th>
													      <th scope="col">Last</th>
													      <th scope="col">Handle</th>
													    </tr>
													  </thead>
													  <tbody>
													    <tr>
													      <th scope="row">1</th>
													      <td>Mark</td>
													      <td>Otto</td>
													      <td>@mdo</td>
													    </tr>
													    <tr>
													      <th scope="row">2</th>
													      <td>Jacob</td>
													      <td>Thornton</td>
													      <td>@fat</td>
													    </tr>
													    <tr>
													      <th scope="row">3</th>
													      <td colspan="2">Larry the Bird</td>
													      <td>@twitter</td>
													    </tr>
													  </tbody>
													</table>

Small table #

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-sm">
													  <thead>
													    <tr>
													      <th scope="col">#</th>
													      <th scope="col">First</th>
													      <th scope="col">Last</th>
													      <th scope="col">Handle</th>
													    </tr>
													  </thead>
													  <tbody>
													    <tr>
													      <th scope="row">1</th>
													      <td>Mark</td>
													      <td>Otto</td>
													      <td>@mdo</td>
													    </tr>
													    <tr>
													      <th scope="row">2</th>
													      <td>Jacob</td>
													      <td>Thornton</td>
													      <td>@fat</td>
													    </tr>
													    <tr>
													      <th scope="row">3</th>
													      <td colspan="2">Larry the Bird</td>
													      <td>@twitter</td>
													    </tr>
													  </tbody>
													</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-sm table-dark">
													  <thead>
													    <tr>
													      <th scope="col">#</th>
													      <th scope="col">First</th>
													      <th scope="col">Last</th>
													      <th scope="col">Handle</th>
													    </tr>
													  </thead>
													  <tbody>
													    <tr>
													      <th scope="row">1</th>
													      <td>Mark</td>
													      <td>Otto</td>
													      <td>@mdo</td>
													    </tr>
													    <tr>
													      <th scope="row">2</th>
													      <td>Jacob</td>
													      <td>Thornton</td>
													      <td>@fat</td>
													    </tr>
													    <tr>
													      <th scope="row">3</th>
													      <td colspan="2">Larry the Bird</td>
													      <td>@twitter</td>
													    </tr>
													  </tbody>
													</table>

Contextual classes #

Class Heading Heading
Active Cell Cell
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
<table class="table">
												  <thead>
												    <tr>
												      <th scope="col">Class</th>
												      <th scope="col">Heading</th>
												      <th scope="col">Heading</th>
												    </tr>
												  </thead>
												  <tbody>
												    <tr class="table-active">
												      <th scope="row">Active</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr>
												      <th scope="row">Default</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>


												    <tr class="table-primary">
												      <th scope="row">Primary</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr class="table-secondary">
												      <th scope="row">Secondary</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr class="table-success">
												      <th scope="row">Success</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr class="table-danger">
												      <th scope="row">Danger</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr class="table-warning">
												      <th scope="row">Warning</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr class="table-info">
												      <th scope="row">Info</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr class="table-light">
												      <th scope="row">Light</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr class="table-dark">
												      <th scope="row">Dark</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												  </tbody>
												</table>

Regular table background variants are not available with the dark table, however, you may use text or background utilitiesto achieve similar styles.

# Heading Heading
1 Cell Cell
2 Cell Cell
3 Cell Cell
4 Cell Cell
5 Cell Cell
6 Cell Cell
7 Cell Cell
8 Cell Cell
9 Cell Cell
<table class="table table-dark">
												  <thead>
												    <tr>
												      <th scope="col">#</th>
												      <th scope="col">Heading</th>
												      <th scope="col">Heading</th>
												    </tr>
												  </thead>
												  <tbody>
												    <tr class="bg-primary">
												      <th scope="row">1</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr>
												      <th scope="row">2</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr class="bg-success">
												      <th scope="row">3</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr>
												      <th scope="row">4</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr class="bg-info">
												      <th scope="row">5</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr>
												      <th scope="row">6</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr class="bg-warning">
												      <th scope="row">7</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr>
												      <th scope="row">8</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												    <tr class="bg-danger">
												      <th scope="row">9</th>
												      <td>Cell</td>
												      <td>Cell</td>
												    </tr>
												  </tbody>
												</table>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Create responsive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl}, making the table scroll horizontally at each max-width breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.

Note

Note that since browsers do not currently support range context queries , we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Captions #

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
													  <caption>List of users</caption>
													  <thead>
													    <tr>
													      <th scope="col">#</th>
													      <th scope="col">First</th>
													      <th scope="col">Last</th>
													      <th scope="col">Handle</th>
													    </tr>
													  </thead>
													  <tbody>
													    <tr>
													      <th scope="row">1</th>
													      <td>Mark</td>
													      <td>Otto</td>
													      <td>@mdo</td>
													    </tr>
													    <tr>
													      <th scope="row">2</th>
													      <td>Jacob</td>
													      <td>Thornton</td>
													      <td>@fat</td>
													    </tr>
													    <tr>
													      <th scope="row">3</th>
													      <td>Larry</td>
													      <td>the Bird</td>
													      <td>@twitter</td>
													    </tr>
													  </tbody>
													</table>

Responsive tables #

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Always responsive #

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell
<div class="table-responsive">
																				  <table class="table">
																				  </table>
																				</div>

Breakpoint specific #

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
<div class="table-responsive-sm">
														  <table class="table">
														  </table>
														</div>

														<div class="table-responsive-md">
														  <table class="table">
														  </table>
														</div>

														<div class="table-responsive-lg">
														  <table class="table">
														  </table>
														</div>

														<div class="table-responsive-xl">
														  <table class="table">
														  </table>
														</div>

Thedir examples #

Moutain View, CA
Freelancer
Top job 2
Wave Agency
Account Executive
Chicago
Part Time
Top job 3
ABA Logistic JSC
Transport Shift Controller
Copenhagen
Temporary
Top job 4
Arates Property Co
Intership Property Sale
London, UK
Intership
Top job 5
Roihalatan LLC
UI/UX Product Designer
Anywhere
Remote
Ukraine
Full Time
Top job 7
Sun Travel Co
Travel Sale Consultant
Berlin, Germany
Full Time
<div class="table-responsive">
														<table class="table listing-table listing-table-job table-hover bg-white">
															<tbody>
																<tr>
																	<td>
																		<div class="media align-items-center">
																			<div class="image mr-3">
																				<img
																						src="../images/listing/top-job-1.jpg"
																						alt="Top job 1">
																			</div>
																			<div class="media-body lh-14">
																				<div class="text-gray lh-14">MEE
																					Studio
																				</div>
																				<a class="font-size-md font-weight-semibold text-dark"
																				   href="../listing-details-gallery.html">3D
																					Animation
																					Designer</a>
																			</div>
																		</div>
																	</td>
																	<td><span
																			class="text-secondary">Moutain View, CA</span>
																	</td>
																	<td>
																		<div class="d-flex">
																			<span class="text-link">Freelancer</span>
																			<span class="text-danger ml-auto"><i
																					class="fas fa-heart"></i> </span>
																		</div>
																	</td>
																</tr>
																<tr>
																	<td>
																		<div class="media align-items-center">
																			<div class="image mr-3">
																				<img
																						src="../images/listing/top-job-2.jpg"
																						alt="Top job 2">
																			</div>
																			<div class="media-body lh-14">
																				<div class="text-gray ">Wave Agency
																				</div>
																				<a class="font-size-md font-weight-semibold text-dark"
																				   href="../listing-details-gallery.html">Account
																					Executive</a>
																			</div>
																		</div>
																	</td>
																	<td><span class="text-secondary">Chicago</span></td>
																	<td>
																		<div class="d-flex">
																			<span class="text-link">Part Time</span>
																			<span class="text-darker-light ml-auto"><i
																					class="fas fa-heart"></i> </span>
																		</div>
																	</td>
																</tr>
																<tr>
																	<td>
																		<div class="media align-items-center">
																			<div class="image mr-3">
																				<img
																						src="../images/listing/top-job-3.jpg"
																						alt="Top job 3">
																			</div>
																			<div class="media-body lh-14">
																				<div class="text-gray ">ABA Logistic
																					JSC
																				</div>
																				<a class="font-size-md font-weight-semibold text-dark"
																				   href="../listing-details-gallery.html">Transport
																					Shift Controller</a>
																			</div>
																		</div>
																	</td>
																	<td><span class="text-secondary">Copenhagen</span>
																	</td>
																	<td>
																		<div class="d-flex">
																			<span class="text-link">Temporary</span>
																			<span class="text-darker-light ml-auto"><i
																					class="fas fa-heart"></i> </span>
																		</div>
																	</td>
																</tr>
																<tr>
																	<td>
																		<div class="media align-items-center">
																			<div class="image mr-3">
																				<img
																						src="../images/listing/top-job-4.jpg"
																						alt="Top job 4">
																			</div>
																			<div class="media-body lh-14">
																				<div class="text-gray ">Arates Property
																					Co
																				</div>
																				<a class="font-size-md font-weight-semibold text-dark"
																				   href="../listing-details-gallery.html">Intership
																					Property Sale</a>
																			</div>
																		</div>
																	</td>
																	<td><span class="text-secondary">London, UK</span>
																	</td>
																	<td>
																		<div class="d-flex">
																			<span class="text-link">Intership</span>
																			<span class="text-darker-light ml-auto"><i
																					class="fas fa-heart"></i> </span>
																		</div>
																	</td>
																</tr>
																<tr>
																	<td>
																		<div class="media align-items-center">
																			<div class="image mr-3">
																				<img
																						src="../images/listing/top-job-5.jpg"
																						alt="Top job 5">
																			</div>
																			<div class="media-body lh-14">
																				<div class="text-gray ">Roihalatan LLC
																				</div>
																				<a href="../listing-details-gallery.html"
																				   class="store-name"><span
																						class="font-size-md font-weight-semibold text-dark">UI/UX Product Designer</span></a>
																			</div>
																		</div>
																	</td>
																	<td><span class="text-secondary">Anywhere</span>
																	</td>
																	<td>
																		<div class="d-flex">
																			<span class="text-link">Remote</span>
																			<span class="text-darker-light ml-auto"><i
																					class="fas fa-heart"></i> </span>
																		</div>
																	</td>
																</tr>
																<tr>
																	<td>
																		<div class="media align-items-center">
																			<div class="image mr-3">
																				<img
																						src="../images/listing/top-job-6.jpg"
																						alt="Top job 6">
																			</div>
																			<div class="media-body lh-14">
																				<div class="text-gray ">BeatsLabs Co
																				</div>
																				<a class="font-size-md font-weight-semibold text-dark"
																				   href="../listing-details-gallery.html">WordPress
																					Thedir -End Developer</a>
																			</div>
																		</div>
																	</td>
																	<td><span class="text-secondary">Ukraine</span></td>
																	<td>
																		<div class="d-flex">
																			<span class="text-link">Full Time</span>
																			<span class="text-darker-light ml-auto"><i
																					class="fas fa-heart"></i> </span>
																		</div>
																	</td>
																</tr>
																<tr>
																	<td>
																		<div class="media align-items-center">
																			<div class="image mr-3">
																				<img
																						src="../images/listing/top-job-7.jpg"
																						alt="Top job 7">
																			</div>
																			<div class="media-body lh-14">
																				<div class="text-gray ">Sun Travel Co
																				</div>
																				<a class="font-size-md font-weight-semibold text-dark"
																				   href="../listing-details-gallery.html">Travel
																					Sale Consultant</a>
																			</div>
																		</div>
																	</td>
																	<td><span
																			class="text-secondary">Berlin, Germany</span>
																	</td>
																	<td>
																		<div class="d-flex">
																			<span class="text-link">Full Time</span>
																			<span class="text-darker-light ml-auto"><i
																					class="fas fa-heart"></i> </span>
																		</div>
																	</td>
																</tr>
															</tbody>
														</table>
													</div>