Bootstrap Tables And List Group

Bootstrap Tables

You can add styling to your tables using bootstrap.. lets look at different style classess offered by bootstrap.

You can style your tables in bootstrap based on the lists below:

Bootstrap Basic Table
Striped Rows
Bordered Table
Hover Rows
Condensed Table
Contextual Classes
Responsive Tables

Bootstrap Basic Table

<!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/3.4.1/css/bootstrap.min.css”>
  <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
</head>
<body>
<div class=“container”>
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>            
  <table class=“table”>
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

RESULTS:

STRIPPED ROW

<!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/3.4.1/css/bootstrap.min.css”>
  <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
<tr>
     <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
 </tr>
    </tbody>
  </table>
</div>
</body>
</html>

Results:

Bordered Table

<!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/3.4.1/css/bootstrap.min.css”>
  <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
</head>
<body>

<div class=“container”>
  <h2>Bordered Table</h2>
  <p>The .table-bordered class adds borders to a table:</p>            
  <table class=“table table-bordered”>
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Hover Table

<!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/3.4.1/css/bootstrap.min.css”>
  <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
</head>
<body>

<div class=“container”>
  <h2>Hover Rows</h2>
  <p>The .table-hover class enables a hover state 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>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Results

Notice that when you over over the table rows, the colour of the row changes from white to Gray. This is affected by <table class=“table table-hover”> ,a bootstrap class . There are many different classess to look at for different tables in bootstrap.

Condensed Table

<!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/3.4.1/css/bootstrap.min.css”>
  <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
</head>
<body>

<div class=“container”>
  <h2>Condensed Table</h2>
  <p>The .table-condensed class makes a table more compact by cutting cell padding in half:</p>            
  <table class=“table table-condensed”>
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Results:

Contextual Classes

<!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/3.4.1/css/bootstrap.min.css”>
  <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
</head>
<body>

<div class=“container”>
  <h2>Contextual Classes</h2>
  <p>Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.</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=“success”>
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class=“danger”>
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class=“info”>
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class=“warning”>
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class=“active”>
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Results

Responsive Table

<!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/3.4.1/css/bootstrap.min.css”>
  <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
</head>
<body>

<div class=“container”>
  <h2>Contextual Classes</h2>
  <p>Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.</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=“success”>
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class=“danger”>
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class=“info”>
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class=“warning”>
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class=“active”>
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Results

Bootstrap List Groups

Basic List Groups (Unordered List With Items)

To create a basic list group, use an `<ul>` element with class `.list-group`, and `<li>` elements with class `.list-group-item`:

Example

<ul class=”list-group”>
  <li class=”list-group-item”>First item</li>
  <li class=”list-group-item”>Second item</li>
  <li class=”list-group-item”>Third item</li>
</ul>

List Group With Badges

To create a badge, create a <span> element with class .badge inside the list item:

Example

<ul class=”list-group”>
  <li class=”list-group-item”>New <span class=”badge”>12</span></li>
  <li class=”list-group-item”>Deleted <span class=”badge”>5</span></li>
  <li class=”list-group-item”>Warnings <span class=”badge”>3</span></li>
</ul>

List Group With Linked Items

To create a list group with linked items, use <div> instead of <ul> and <a> instead of <li>:

Example

<div class=”list-group”>
  <a href=”#” class=”list-group-item”>First item</a>
  <a href=”#” class=”list-group-item”>Second item</a>
  <a href=”#” class=”list-group-item”>Third item</a>
</div>

Active State

Example

Use the .active class to highlight the current item:

<a href=”#” class=”list-group-item active”>First item</a>

Example

To disable an item, add the .disabled class:

<a href=”#” class=”list-group-item disabled”>First item</a>

Contextual Classes

The classes for coloring list-items are: .list-group-item-success, list-group-item-info, list-group-item-warning, and .list-group-item-danger:

Contextual classes can be used to color list items:

<h2>List Group With Contextual Classes</h2>
  
    <ul class=“list-group”>
  
      <li class=“list-group-item list-group-item-success”>First item</li>
  
      <li class=“list-group-item list-group-item-info”>Second item</li>
  
      <li class=“list-group-item list-group-item-warning”>Third item</li>
  
      <li class=“list-group-item list-group-item-danger”>Fourth item</li>
  
    </ul>