Bootstrap Table CSS Style

Bootstrap is a web design framework consisting of HTML, CSS, and JavaScript codes. This framework is a powerful tool for designing responsive web pages and has various components such as tables. Tables are one of the essential components in web design, which can also be used in Bootstrap. Using Bootstrap CSS classes, you can create a beautiful and editable table (even an RTL table) with a regular structure.

Basic table

By adding the “table” class to the table element, you can create tables with a simple style that has horizontal separators and small cell padding.

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>

Striped rows

The table-striped class in Bootstrap makes the table have striped rows.

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Hoverable rows

The table-hover class adds a light gray background to the rows, this background color is visible when the cursor is over them.

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Border table

By adding the table-bordered class to the table, border lines are added around the entire table.

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Borderless table

Adding the table-borderless class will make the internal lines and border lines disappear in the table and will be shown in a simple way.

<table class="table table-borderless">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Bootstrap Checkboxes table

A checkbox is a component that allows the user to make multiple choices, widely used in forms and surveys.

<table class="table">
  <thead>
    <tr>
      <th scope="col">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
        </div>
      </th>
      <th scope="col">Lorem</th>
      <th scope="col">Ipsum</th>
      <th scope="col">Dolor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
        </div>
      </th>
      <td>Sit</td>
      <td>Amet</td>
      <td>Consectetur</td>
    </tr>
    <tr>
      <th scope="row">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
        </div>
      </th>
      <td>Adipisicing</td>
      <td>Elit</td>
      <td>Sint</td>
    </tr>
  </tbody>

Table head

Similar to tables, use the “thead-light” or “thead-dark” modifier classes to make the <thead> tags appear light or dark gray.

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col"> First Name </th>
      <th scope="col"> Last Name </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>

Small table

The “table-sm” class makes tables more compact by halving cell layers.

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col"> First Name </th>
      <th scope="col">Last Name </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>

Contextual classes

Contextual classes allow us to change the background color of table rows or specific cells of our table.

  • active: Applies floating color to a specific row or cell.
  • success: indicates a positive or successful action.
  • danger: Indicates a dangerous or potentially negative action.
<table class = "table">
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   <tbody>
      <tr class = "active">
         <td>Product 1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      <tr class = "success">
         <td>Product 2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>      
      <tr class = "danger">
         <td>Product 3</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
</table> 

condensed Bootstrap table

By adding the table-condensed class, row spacing is halved to compress the table.

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>     

Responsive Bootstrap table

By placing the table-responsive class, we can scroll the table horizontally on small devices (below 768px). When viewing the table on a device with a width larger than 768 pixels, we will not see any difference in these tables.

<div class = "table-responsive">
   <table class = "table">
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Product 1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         <tr>
            <td>Product 2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         <tr>
            <td>Product 3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
      </tbody>
   </table>
</div>
Shopping Cart
# First Name Last Name
1 Mark Otto
2 Jacob Thornton