web development

Bootstrap tables and base classes

A table is an important part of the website content, and Bootstrap tables are responsive for different device sizes and look aesthetically pleasing. Bootstrap has a rich set of basic classes that handle many table layout tasks on the page.

Basic Bootstrap Table Class

The basic class for tables is class=”table”. Simply adding it to the element creates spacing and horizontal section dividers.
# First Name Last Name Username
1 Illya Murovets @illusha
2 Dobrynya Nikitych @dobr
3 Alyosha Popovich @aleksiy_popovich 
				
					<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Illya</td>
      <td>Murovets</td>
      <td>@illusha</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Dobrynya</td>
      <td>Nikitych</td>
      <td>@dobr</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Alyosha</td>
      <td>Popovich</td>
      <td>@aleksiy_popovich</td>
    </tr>
  </tbody>
</table>
This is the simplest type of basic table layout. All table styles present on your website are inherited by Bootstrap. By changing the class to .table-dark, we get an inverted color scheme.
# First Name Last Name Username
1 Illya Murovets @illusha
2 Dobrynya Nikitych @dobr
3 Alyosha Popovich @aleksiy_popovich

Alternating Row Backgrounds in a Table

You can add an automatic alternating background in table rows: one row with standard white, the next with a gray background (background-color: #f9f9f9;). To achieve alternating backgrounds in table rows, add the .table-striped class.
# First Name Last Name Username
1 Illya Murovets @illusha
2 Dobrynya Nikitych @dobr
3 Alyosha Popovich @aleksiy_popovich
4 Svyatogor @svyatogor 
				
					<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Illya</td>
      <td>Murovets</td>
      <td>@illusha</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Dobrynya</td>
      <td>Nikitych</td>
      <td>@dobr</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Alyosha</td>
      <td>Popovich</td>
      <td>@aleksiy_popovich</td>
    </tr>
  </tbody>
</table>

Highlighting Table Rows on Hover

To highlight a row when the cursor hovers over it, we add the class .table-hover to the base selector. The base class uses the background-color property with the value #f5f5f5, which can be changed if desired.
# First Name Last Name Username
1 Illya Murovets @illusha
2 Dobrynya Nikitych @dobr
3 Alyosha Popovich @aleksiy_popovich
4 Svyatogor @svyatogor 
<table class="table table-hover">
…
</table>

Table with Horizontal Scrolling

When there are many cells in a table and horizontal scrolling is necessary, use the class .table-responsive. This class is also used when the table is large and you need scrolling on mobile devices.
Number of Days in January
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 
<table class="table table-responsive">
…
</table>

Highlighting Table Rows and Cells with Color

In the basic Bootstrap classes, the ability to highlight table rows or individual cells with color is already included.
Type Column Header Column Header
Active (table-active) Cell Cell
Default (Default) Cell Cell
Primary (table-primary) Cell Cell
Secondary (table-secondary) Cell Cell
Success (table-success) Cell Cell
Danger (table-danger) Cell Cell
Warning (table-warning) Cell Cell
Info (table-info) Cell Cell
Light (table-light) Cell Cell
Dark (table-dark) Cell Cell
You can apply color to the entire row <tr> or to a specific cell. For example, apply the primary color scheme to the “Dobrynya” cell.
# First Name Last Name Username
1 Illya Murovets @illusha
2 Dobrynya Nikitych @dobr
3 Alyosha Popovich @aleksiy_popovich 
				
					<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Illya</td>
      <td>Murovets</td>
      <td>@illusha</td>
    </tr>
    <tr>
      <th>2</th>
      <td class="table-primary">Dobrynya</td>
      <td>Nikitych</td>
      <td>@dobr</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Alyosha</td>
      <td>Popovich</td>
      <td>@aleksiy_popovich</td>
    </tr>
  </tbody>
</table>
Ⓒ 2012 – 2025 | Help2Site.com

Sitemap