Table of Contents

    Bootstrap Table Examples: Styling and Usage Guide

    Rumman Ansari July 05, 2024 6,084 views
    Bootstrap Table Examples: Styling and Usage Guide

    Only Important Code

     

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Lara</td>
        <td>lara@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Sara</td>
        <td>sara@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Jara</td>
        <td>jara@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dara</td>
        <td>dara@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Kara</td>
        <td>kara@example.com</td>
      </tr>
    </tbody>
  </table>

    Full Code For The Above Example

    

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2 id="article-heading-3">Contextual Classes</h2>
  <p>Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:</p>
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Lara</td>
        <td>lara@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Sara</td>
        <td>sara@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Jara</td>
        <td>jara@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dara</td>
        <td>dara@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Kara</td>
        <td>kara@example.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>Mara</td>
        <td>mara@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Fara</td>
        <td>fara@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Para</td>
        <td>para@example.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>Nuri</td>
        <td>nuri@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>
    See Live Preview of the above code

    Only Important Code

     

  <table class="table table-borderless">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mom</td>
        <td>Doe</td>
        <td>mom@example.com</td>
      </tr>
      <tr>
        <td>Dad</td>
        <td>Moe</td>
        <td>dad@example.com</td>
      </tr>
      <tr>
        <td>Bro</td>
        <td>Dooley</td>
        <td>bro@example.com</td>
      </tr>
    </tbody>
  </table>

    Full Code For The Above Example

    

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2 id="article-heading-6">Borderless Table</h2>
  <p>The .table-borderless class removes borders from the table:</p>            
  <table class="table table-borderless">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mom</td>
        <td>Doe</td>
        <td>mom@example.com</td>
      </tr>
      <tr>
        <td>Dad</td>
        <td>Moe</td>
        <td>dad@example.com</td>
      </tr>
      <tr>
        <td>Bro</td>
        <td>Dooley</td>
        <td>bro@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>
    See Live Preview of the above code

    Only Important Code

     

  <table class="table table-dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Susy</td>
        <td>Gala</td>
        <td>susy@example.com</td>
      </tr>
      <tr>
        <td>Kagney </td>
        <td>Karter</td>
        <td>kagney@example.com</td>
      </tr>
      <tr>
        <td>Audreytd>
        <td>Bitoni</td>
        <td>audreytd@example.com</td>
      </tr>
    </tbody>
  </table>

    Full Code For The Above Example

    

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2 id="article-heading-9">Black/Dark Table</h2>
  <p>The .table-dark class adds a black background to the table:</p>            
  <table class="table table-dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Susy</td>
        <td>Gala</td>
        <td>susy@example.com</td>
      </tr>
      <tr>
        <td>Kagney </td>
        <td>Karter</td>
        <td>kagney@example.com</td>
      </tr>
      <tr>
        <td>Audreytd>
        <td>Bitoni</td>
        <td>audreytd@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>
    See Live Preview of the above code

    Only Important Code

     

  <table class="table table-bordered table-sm">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sharuk</td>
        <td>Mondak</td>
        <td>sharuk@example.com</td>
      </tr>
      <tr>
        <td>Sabit</td>
        <td>Hossain</td>
        <td>sabit@example.com</td>
      </tr>
      <tr>
        <td>Sohel</td>
        <td>kobir</td>
        <td>sohel@example.com</td>
      </tr>
    </tbody>
  </table>

    Full Code For The Above Example

    

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2 id="article-heading-12">Small Table</h2>
  <p>The .table-sm class makes the table smaller by cutting cell padding in half:</p>
  <table class="table table-bordered table-sm">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sharuk</td>
        <td>Mondak</td>
        <td>sharuk@example.com</td>
      </tr>
      <tr>
        <td>Sabit</td>
        <td>Hossain</td>
        <td>sabit@example.com</td>
      </tr>
      <tr>
        <td>Sohel</td>
        <td>kobir</td>
        <td>sohel@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>
    See Live Preview of the above code

    Only Important Code

     

  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Hello</td>
        <td>Sheikh</td>
        <td>hello@example.com</td>
      </tr>
 
    </tbody>
  </table>
  <table class="table">
    <thead class="thead-light">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Hello</td>
        <td>Khan</td>
        <td>hello@example.com</td>
      </tr>
 
    </tbody>
  </table>

    Full Code For The Above Example

    

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2 id="article-heading-15">Table Head Colors</h2>
  <p>The .thead-dark class adds a black background to table headers, and the .thead-light class adds a grey background to table headers:</p>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Hello</td>
        <td>Sheikh</td>
        <td>hello@example.com</td>
      </tr>
      <tr>
        <td>Hi</td>
        <td>Khan</td>
        <td>hi@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  <table class="table">
    <thead class="thead-light">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Hello</td>
        <td>Khan</td>
        <td>hello@example.com</td>
      </tr>
      <tr>
        <td>Hi</td>
        <td>Bibi</td>
        <td>hi@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Marli</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>
    See Live Preview of the above code