Bootstrap Tables

Bootstrap 4 table classes style tabular data without changing semantic table markup.

Basic and Striped Tables Top ↑

<table class="table">
  ...
</table>

<table class="table table-striped">
  ...
</table>

Bordered, Hover and Small Top ↑

<table class="table table-bordered table-hover table-sm">
  ...
</table>

Contextual Rows Top ↑

<tr class="table-success">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>

Responsive Table Top ↑

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

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<tr class='table-active'>...</tr>

<tr class='table-primary'>...</tr>
<tr class='table-secondary'>...</tr>
<tr class='table-success'>...</tr>
<tr class='table-danger'>...</tr>
<tr class='table-warning'>...</tr>
<tr class='table-info'>...</tr>
<tr class='table-light'>...</tr>
<tr class='table-dark'>...</tr>

Original example 2

<table class='table'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>

Original example 3

<table class='table table-striped'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>

Original example 4

<table class='table table-bordered'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>

Original example 5

<table class='table table-hover'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>

Original example 6

<table class='table table-condensed'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>

Original example 7

<table class='table'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr ><td>1</td><td>Default</td><td>Four</td><td>52</td></tr>
<tr class='active'><td>2</td><td>Active</td><td>Four</td><td>52</td></tr>
<tr class='success'><td>3</td><td>Success</td><td>Three</td><td>85</td></tr>
<tr class='info'><td>4</td><td>Info</td><td>Six</td><td>55</td></tr>
<tr class='warning'><td>5</td><td>Warning</td><td>Six</td><td>55</td></tr>
<tr class='danger'><td>6</td><td>Danger</td><td>Six</td><td>55</td></tr>
</table>

Original example 8

<div class='table-responsive'>
<table class='table'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>
</div>

Original example 9

<style>
.my_table {width:300px;}
 .my_table tr, .my_table  td {
  border: 3px solid;
border-color: red;
}
</style>

Original example 10

<style>
 .my_table tr, .my_table  td {
  border: 1px solid;
font-size:10px;
}
</style>

Original example 11

<table class='table my_table'>
<tr><td>ID</td><td>Name</td><td>Class</td><td>Mark</td></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>

Additional Original Learning Routes Top ↑

• bs-font-colour.php
• msg-demo/bs-table-4.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: