CoreUI Components For Bootstrap — Part 2 by Mehwash Patel

Published in

CoreUI

4 min readApr 1, 2021

CoreUI is a complete Dashboard UI Kit that allows you to quickly build UX friendly, responsive applications.

In part 1 of this series we learned in detail about 3 CoreUI components: Alert, Badge & Toast. In this article we’ll learn more about tables component along with its various attributes and properties.

Let’s get started.

At it’s simplest CoreUI Bootstrap table has a light padding, borders, horizontal & vertical dividers with zebra-striped rows i.e. alternate dark and light rows. Just add .table class to <table> tag and voila basic styling will be added to the table.

Basic Table

Invert Row Colors

If you wish to invert the row colors i.e. start with dark row and than alternate it with light row use class .table-dark along with the above .table class.

Example:

<table class=”table table-dark”>…</table>

Hoverable Rows

To add hover effect on table rows use .table-hover class

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

Small Table

If you’d like your table to appear smaller in size or more compact than use .table-sm class. What it does is basically, it removes half of the cell padding to make it appear more compact.

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

Small Table

Responsive Tables

Make any table responsive across all viewports by wrapping a <table> tag with <div> and adding a .table-responsive class. The table will then scroll horizontally on small devices thereby enhancing user experience and reducing developer’s effort.

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

Table Head Colors

Use class .thead-light to make table header’s background light gray or .thead-dark to make table header’s background dark gray.

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  ...
</table>

THead Light

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  ...
</table>

THead Dark

Contextual Classes

So far we’ve seen only 2 colors within the table i.e. light gray and dark gray. Use contextual classes to color table rows or individual cells.

Contextual classes that can be used are:

.table-active , .table-primary , .table-secondary ,

.table-success , .table-danger , .table-warning ,

.table-info , .table-light , .table-dark

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Class</th>
      <th scope="col">Heading</th>
      <th scope="col">Heading</th>
    </tr>
  </thead>
  <tbody>
      <!-- On rows -->
      <tr class="table-active">...</tr>
      <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>      <!-- On cells (`td` or `th`) -->
      <tr>
        <td class="table-active">...</td>
        <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>
   </tbody>
</table>