Bootstrap 5 Table

A Bootstrap 4 table has a light padding and horizontal dividers. To style the table using bootstrap class use "table" class in the table tag.

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


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


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

Striped Rows - The .table-striped class adds zebra-stripes to a table.

<div class="container">
    <h2>Developers List</h2>
    <table class="table table-striped"> 
        ...
    </table>
</div> 

Striped Column - The .table-striped-columns class adds zebra-stripes to a table columns.

<div class="container">
    <h2>Developers List</h2>
    <table class="table table-striped-columns"> 
        ...
    </table>
</div> 

<table class="table table-dark table-striped"></table>
<table class="table table-success table-striped"></table>
<table class="table table-primary table-striped"></table>

Hover Rows - The .table-hover class adds a hover effect (grey background color) on table row.

<table class="table table-hover"></table>

Add .table-bordered for borders on all sides of the table and cells.

<table class="table table-bordered"></table>
<table class="table table-bordered border-primary"></table>
<table class="table table-borderless"></table>

The .table-sm class makes a table more compact by cutting cell padding in half.

<table class="table table-sm"> </table>

Responsive tables allow tables to be scrolled horizontally. Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint.

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