Bootstrap Table Classes: Styling and Customization Guide

Rumman Ansari   Software Engineer   2024-07-05 05:31:47   5791  Share
Subject Syllabus DetailsSubject Details
☰ TContent
☰Fullscreen

Table of Content:

Only Important Code

 

  <table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Rahim</td>
        <td>Doe</td>
        <td>rahim@example.com</td>
      </tr>
      <tr>
        <td>Karim</td>
        <td>Moe</td>
        <td>karim@example.com</td>
      </tr>
      <tr>
        <td>Julakha</td>
        <td>Dooley</td>
        <td>Julakha@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>Hoverable Dark Table</h2>
  <p>The .table-hover class adds a hover effect (grey background color) on table rows:</p>            
  <table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Rahim</td>
        <td>Doe</td>
        <td>rahim@example.com</td>
      </tr>
      <tr>
        <td>Karim</td>
        <td>Moe</td>
        <td>karim@example.com</td>
      </tr>
      <tr>
        <td>Julakha</td>
        <td>Dooley</td>
        <td>Julakha@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

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

Only Important Code

 

  <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sabana</td>
        <td>Doe</td>
        <td>Sabana@example.com</td>
      </tr>
      <tr>
        <td>Sabana Sultana</td>
        <td>Moe</td>
        <td>sabana@example.com</td>
      </tr>
      <tr>
        <td>Sumi</td>
        <td>Dooley</td>
        <td>sumi@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>Dark Striped Table</h2>
  <p>Combine .table-dark and .table-striped to create a dark, striped table:</p>            
  <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sabana</td>
        <td>Doe</td>
        <td>Sabana@example.com</td>
      </tr>
      <tr>
        <td>Sabana Sultana</td>
        <td>Moe</td>
        <td>sabana@example.com</td>
      </tr>
      <tr>
        <td>Sumi</td>
        <td>Dooley</td>
        <td>sumi@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

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

Only Important Code

 

  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Faruk</td>
        <td>Doe</td>
        <td>faruk@example.com</td>
      </tr>
      <tr>
        <td>Maryam</td>
        <td>Moe</td>
        <td>maryam@example.com</td>
      </tr>
      <tr>
        <td>Sultan</td>
        <td>Dooley</td>
        <td>sultan@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>Bordered Table</h2>
  <p>The .table-bordered class adds borders on all sides of the table and the cells:</p>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Faruk</td>
        <td>Doe</td>
        <td>faruk@example.com</td>
      </tr>
      <tr>
        <td>Maryam</td>
        <td>Moe</td>
        <td>maryam@example.com</td>
      </tr>
      <tr>
        <td>Sultan</td>
        <td>Dooley</td>
        <td>sultan@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

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

Only Important Code

 

  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Moana</td>
        <td>art</td>
        <td>moana@example.com</td>
      </tr>
      <tr>
        <td>Sattamurti</td>
        <td>son</td>
        <td>sattamurti@example.com</td>
      </tr>
      <tr>
        <td>mahesh</td>
        <td>babu</td>
        <td>mahesh@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>Hover Rows</h2>
  <p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>            
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Moana</td>
        <td>art</td>
        <td>moana@example.com</td>
      </tr>
      <tr>
        <td>Sattamurti</td>
        <td>son</td>
        <td>sattamurti@example.com</td>
      </tr>
      <tr>
        <td>mahesh</td>
        <td>babu</td>
        <td>mahesh@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

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

Only Important Code

 

  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ali</td>
        <td>Baba</td>
        <td>ali@example.com</td>
      </tr>
      <tr>
        <td>Uni</td>
        <td>ke</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>Valo</td>
        <td>acho</td>
        <td>valo@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>Striped Rows</h2>
  <p>The .table-striped class adds zebra-stripes to a table:</p>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ali</td>
        <td>Baba</td>
        <td>ali@example.com</td>
      </tr>
      <tr>
        <td>Uni</td>
        <td>ke</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>Valo</td>
        <td>acho</td>
        <td>valo@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

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