Powerful Svelte-Bootstrap SaaS App Template

Admin CRM Application Template

Robust Next.js SaaS App Template

Powerful React-Bootstrap SaaS App Template

Modern Remix SaaS App Template

VueJS-Bootstrap SaaS App Template

Intuitive Nuxt-Bootstrap SaaS App Template

Tables

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

Regular table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
Footer	Footer	Footer	Footer

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<template>
  <div>
    <BTable
      striped
      hover
      :items="items"
    />
  </div>
</template>
<script setup lang="ts">
const items = [
  {age: 40, first_name: 'Mark', last_name: 'Otto'},
  {age: 21, first_name: 'Jacob', last_name: 'Thornton'},
  {age: 89, first_name: 'Larry', last_name: 'the Bird'},
  {age: 38, first_name: 'Jami', last_name: 'Carney'},
]
</script>

<template>
  <div>
    <BTable
      striped
      hover
      :items="items"
    />
  </div>
</template>
<script setup lang="ts">
const items = [
  {age: 40, first_name: 'Mark', last_name: 'Otto'},
  {age: 21, first_name: 'Jacob', last_name: 'Thornton'},
  {age: 89, first_name: 'Larry', last_name: 'the Bird'},
  {age: 38, first_name: 'Jami', last_name: 'Carney'},
]
</script>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

Table head options

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

#	thead-primary	Last Name	Username	Role

#	thead-secondary	Last Name	Username	Role

#	thead-success	Last Name	Username	Role

#	thead-warning	Last Name	Username	Role

#	thead-info	Last Name	Username	Role

#	thead-danger	Last Name	Username	Role

#	thead-dark	Last Name	Username	Role

#	thead-light	Last Name	Username	Role

<table class="table">
	<thead class="thead-primary">
		<tr>
			<th>#</th>
			<th class="w-30">thead-primary</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-secondary">
		<tr>
			<th>#</th>
			<th class="w-30">thead-secondary</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-success">
		<tr>
			<th>#</th>
			<th class="w-30">thead-success</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-warning">
		<tr>
			<th>#</th>
			<th class="w-30">thead-warning</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-info">
		<tr>
			<th>#</th>
			<th class="w-30">thead-info</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-danger">
		<tr>
			<th>#</th>
			<th class="w-30">thead-danger</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table mb-0">
	<thead class="thead-dark">
		<tr>
			<th>#</th>
			<th class="w-30">thead-dark</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table mb-0">
	<thead class="thead-light">
		<tr>
			<th>#</th>
			<th class="w-30">thead-light</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>

<template>
  <div>
    <BTable
      :fields="fields"
      :items="items"
      foot-clone
    >
      <!-- A custom formatted data column cell -->
      <template #cell(name)="data">
        {{ (data.value as any as Name).first }} {{ (data.value as any as Name).last }}
      </template>
      <!-- A custom formatted header cell for field 'name' -->
      <template #head(name)="data">
        <span class="text-info">{{ data.label!.toUpperCase() }}</span>
      </template>
      <!-- A custom formatted footer cell for field 'name' -->
      <template #foot(name)="data">
        <span class="text-danger">{{ data.label }}</span>
      </template>
      <!-- Default fall-back custom formatted footer cell -->
      <template #foot()="data">
        <i>{{ data.label }}</i>
      </template>
    </BTable>
  </div>
</template>
<script setup lang="ts">
type Name = {first: string; last: string}
const fields = [
  // A column that needs custom formatting
  {key: 'name', label: 'Full Name'},
  // A regular column
  'age',
  // A regular column
  'sex',
]
const items = [
  {name: {first: 'John', last: 'Doe'}, sex: 'Male', age: 42},
  {name: {first: 'Jane', last: 'Doe'}, sex: 'Female', age: 36},
  {name: {first: 'Rubin', last: 'Kincade'}, sex: 'Male', age: 73},
  {name: {first: 'Shirley', last: 'Partridge'}, sex: 'Female', age: 62},
]
</script>

<template>
  <div>
    <BTable
      :fields="fields"
      :items="items"
      foot-clone
    >
      <!-- A custom formatted data column cell -->
      <template #cell(name)="data">
        {{ (data.value as any as Name).first }} {{ (data.value as any as Name).last }}
      </template>
      <!-- A custom formatted header cell for field 'name' -->
      <template #head(name)="data">
        <span class="text-info">{{ data.label!.toUpperCase() }}</span>
      </template>
      <!-- A custom formatted footer cell for field 'name' -->
      <template #foot(name)="data">
        <span class="text-danger">{{ data.label }}</span>
      </template>
      <!-- Default fall-back custom formatted footer cell -->
      <template #foot()="data">
        <i>{{ data.label }}</i>
      </template>
    </BTable>
  </div>
</template>
<script setup lang="ts">
type Name = {first: string; last: string}
const fields = [
  // A column that needs custom formatting
  {key: 'name', label: 'Full Name'},
  // A regular column
  'age',
  // A regular column
  'sex',
]
const items = [
  {name: {first: 'John', last: 'Doe'}, sex: 'Male', age: 42},
  {name: {first: 'Jane', last: 'Doe'}, sex: 'Female', age: 36},
  {name: {first: 'Rubin', last: 'Kincade'}, sex: 'Male', age: 73},
  {name: {first: 'Shirley', last: 'Partridge'}, sex: 'Female', age: 62},
]
</script>

<table class="table">
	<thead class="thead-primary">
		<tr>
			<th>#</th>
			<th class="w-30">thead-primary</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-secondary">
		<tr>
			<th>#</th>
			<th class="w-30">thead-secondary</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-success">
		<tr>
			<th>#</th>
			<th class="w-30">thead-success</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-warning">
		<tr>
			<th>#</th>
			<th class="w-30">thead-warning</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-info">
		<tr>
			<th>#</th>
			<th class="w-30">thead-info</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-danger">
		<tr>
			<th>#</th>
			<th class="w-30">thead-danger</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table mb-0">
	<thead class="thead-dark">
		<tr>
			<th>#</th>
			<th class="w-30">thead-dark</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table mb-0">
	<thead class="thead-light">
		<tr>
			<th>#</th>
			<th class="w-30">thead-light</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>

Table hover

Use the hover props to enable a hover state on <Table>.

#	Products	Sales
1	Milk Powder	28.76%
2	Air Conditioner	8.55%
3	RC Cars	58.56%
4	Down Coat	35.76%

<table class="table table-hover mb-0">
	<thead>
		<tr>
			<th>#</th>
			<th>Products</th>
			<th>Popularity</th>
			<th>Sales</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Milk Powder</td>
			<td class="peity-gradient"><div id="sparkline_chart_t1"></div> </td>
			<td><span class="text-danger"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 28.76%</span> </td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Air Conditioner</td>
			<td class="peity-gradient"><div id="sparkline_chart_t2"></div> </td>
			<td><span class="text-warning"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 8.55%</span> </td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>RC Cars</td>
			<td class="peity-gradient"><div id="sparkline_chart_t3"></div> </td>
			<td><span class="text-success"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 58.56%</span> </td>
		</tr>
		<tr>
			<th scope="row">4</th>
			<td>Down Coat</td>
			<td class="peity-gradient"><div id="sparkline_chart_t4"></div> </td>
			<td><span class="text-info"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 35.76%</span> </td>
		</tr>
	</tbody>
</table>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<table class="table table-hover mb-0">
	<thead>
		<tr>
			<th>#</th>
			<th>Products</th>
			<th>Popularity</th>
			<th>Sales</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Milk Powder</td>
			<td class="peity-gradient"><div id="sparkline_chart_t1"></div> </td>
			<td><span class="text-danger"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 28.76%</span> </td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Air Conditioner</td>
			<td class="peity-gradient"><div id="sparkline_chart_t2"></div> </td>
			<td><span class="text-warning"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 8.55%</span> </td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>RC Cars</td>
			<td class="peity-gradient"><div id="sparkline_chart_t3"></div> </td>
			<td><span class="text-success"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 58.56%</span> </td>
		</tr>
		<tr>
			<th scope="row">4</th>
			<td>Down Coat</td>
			<td class="peity-gradient"><div id="sparkline_chart_t4"></div> </td>
			<td><span class="text-info"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 35.76%</span> </td>
		</tr>
	</tbody>
</table>

Bordered table

Use the bordered props for borders on all sides of the table and cells.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-bordered  mb-0">
<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>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<table class="table table-bordered  mb-0">
<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>

Borderless table

Use the borderless props for a table without borders.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-borderless  mb-0">
	<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>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<table class="table table-borderless  mb-0">
	<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>

Striped table

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

Task	Progress	Deadline	Action
Lunar probe project		May 15, 2015
Dream successful plan		July 1, 2015
Office automatization		Apr 12, 2015
The sun climbing plan		Aug 9, 2015
Open strategy		Apr 2, 2015
Tantas earum numeris		July 11, 2015

<table class="table table-hover table-striped mb-0">
<thead>
	<tr>
		<th>Task</th>
		<th>Progress</th>
		<th>Deadline</th>
		<th>Action</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Lunar probe project</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-danger" style="width: 35%"></div>
			</div>
		</td>
		<td>May 15, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>Dream successful plan</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
			</div>
		</td>
		<td>July 1, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>Office automatization</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-success" style="width: 100%"></div>
			</div>
		</td>
		<td>Apr 12, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>The sun climbing plan</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-primary" style="width: 70%"></div>
			</div>
		</td>
		<td>Aug 9, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>Open strategy</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-primary" style="width: 85%"></div>
			</div>
		</td>
		<td>Apr 2, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>Tantas earum numeris</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
			</div>
		</td>
		<td>July 11, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
</tbody>
</table>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<table class="table table-hover table-striped mb-0">
<thead>
	<tr>
		<th>Task</th>
		<th>Progress</th>
		<th>Deadline</th>
		<th>Action</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Lunar probe project</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-danger" style="width: 35%"></div>
			</div>
		</td>
		<td>May 15, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>Dream successful plan</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
			</div>
		</td>
		<td>July 1, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>Office automatization</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-success" style="width: 100%"></div>
			</div>
		</td>
		<td>Apr 12, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>The sun climbing plan</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-primary" style="width: 70%"></div>
			</div>
		</td>
		<td>Aug 9, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>Open strategy</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-primary" style="width: 85%"></div>
			</div>
		</td>
		<td>Apr 2, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>Tantas earum numeris</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
			</div>
		</td>
		<td>July 11, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
</tbody>
</table>

Large table

Use the size="lg" props to make tables large.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-lg">
<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>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<table class="table table-lg">
<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

Use size="sm" to make tables more compact by cutting cell padding in half.

#	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>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<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>

Responsive table

Across every breakpoint, use responsive for horizontally scrolling tables. Responsive tables are wrapped automatically in a div. or Use responsive="sm", responsive="md", responsive="lg", or responsive="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	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">
	<thead>
	<tr>
		<th scope="col">#</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th scope="row">1</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	<tr>
		<th scope="row">2</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	<tr>
		<th scope="row">3</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	</tbody>
</table>
</div>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<div class="table-responsive">
<table class="table">
	<thead>
	<tr>
		<th scope="col">#</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th scope="row">1</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	<tr>
		<th scope="row">2</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	<tr>
		<th scope="row">3</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	</tbody>
</table>
</div>

Contextual classes

Use classes ( .active, .success, .info, .warning, .danger ) to color table rows or individual cells.

#	Column heading	Column heading	Column heading
Active	Column content	Column content	Column content
Default	Column content	Column content	Column content
Primary	Column content	Column content	Column content
Secondary	Column content	Column content	Column content
Success	Column content	Column content	Column content
Danger	Column content	Column content	Column content
Warning	Column content	Column content	Column content
Info	Column content	Column content	Column content
Light	Column content	Column content	Column content
Dark	Column content	Column content	Column content

<ul class="list-group">
	<li class="list-group-item">This is a regular list group item</li>
	<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
	<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
	<li class="list-group-item list-group-item-success">This is a success list group item</li>
	<li class="list-group-item list-group-item-danger">This is a danger list group item</li>
	<li class="list-group-item list-group-item-warning">This is a warning list group item</li>
	<li class="list-group-item list-group-item-info">This is a info list group item</li>
	<li class="list-group-item list-group-item-light">This is a light list group item</li>
	<li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<ul class="list-group">
	<li class="list-group-item">This is a regular list group item</li>
	<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
	<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
	<li class="list-group-item list-group-item-success">This is a success list group item</li>
	<li class="list-group-item list-group-item-danger">This is a danger list group item</li>
	<li class="list-group-item list-group-item-warning">This is a warning list group item</li>
	<li class="list-group-item list-group-item-info">This is a info list group item</li>
	<li class="list-group-item list-group-item-light">This is a light list group item</li>
	<li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>

Table search

Add class .table-filter in table tag. and add .table-search in input field.

#	First Name	Last Name	Username
1	Jens	Brincker	Brincker123
2	Mark	Hay	Hay123
3	Anthony	Davie	Davie123
4	David	Perry	Perry123
5	Anthony	Davie	Davie123
6	Alan	Gilchrist	Gilchrist123

<input class="form-control mb-2 table-search" id="" type="text" placeholder="Search...">
<div class="table-responsive">
	<table class="table table-hover table-filter mb-0">
		<thead>
			<tr>
				<th>#</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Username</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">1</th>
				<td>Jens</td>
				<td>Brincker</td>
				<td>Brincker123</td>
			</tr>
			<tr>
				<th scope="row">2</th>
				<td>Mark</td>
				<td>Hay</td>
				<td>Hay123</td>
			</tr>
			<tr>
				<th scope="row">3</th>
				<td>Anthony</td>
				<td>Davie</td>
				<td>Davie123</td>
			</tr>
			<tr>
				<th scope="row">4</th>
				<td>David</td>
				<td>Perry</td>
				<td>Perry123</td>
			</tr>
			<tr>
				<th scope="row">5</th>
				<td>Anthony</td>
				<td>Davie</td>
				<td>Davie123</td>
			</tr>
			<tr>
				<th scope="row">6</th>
				<td>Alan</td>
				<td>Gilchrist</td>
				<td>Gilchrist123</td>
			</tr>
		</tbody>
	</table>
</div>

$(".table-search").on("keyup", function() {
	var value = $(this).val().toLowerCase();
	$(".table-filter tbody tr").filter(function() {
		$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
	});
});

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<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>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>

<input class="form-control mb-2 table-search" id="" type="text" placeholder="Search...">
<div class="table-responsive">
	<table class="table table-hover table-filter mb-0">
		<thead>
			<tr>
				<th>#</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Username</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">1</th>
				<td>Jens</td>
				<td>Brincker</td>
				<td>Brincker123</td>
			</tr>
			<tr>
				<th scope="row">2</th>
				<td>Mark</td>
				<td>Hay</td>
				<td>Hay123</td>
			</tr>
			<tr>
				<th scope="row">3</th>
				<td>Anthony</td>
				<td>Davie</td>
				<td>Davie123</td>
			</tr>
			<tr>
				<th scope="row">4</th>
				<td>David</td>
				<td>Perry</td>
				<td>Perry123</td>
			</tr>
			<tr>
				<th scope="row">5</th>
				<td>Anthony</td>
				<td>Davie</td>
				<td>Davie123</td>
			</tr>
			<tr>
				<th scope="row">6</th>
				<td>Alan</td>
				<td>Gilchrist</td>
				<td>Gilchrist123</td>
			</tr>
		</tbody>
	</table>
</div>

Regular table
Table head options
Table hover
Bordered table
Borderless table
Striped table
Large table
Small table
Responsive table
Contextual classes
Table search