Manipulating tables
The Bootstrap framework offers a wide variety for table customization. To present them, we will create a new row before the <footer>
and a price table for our landing page, like this:
To do this, we must create a regular table with the <table>
, <thead>
, <tbody>
, <tr>
, <th>
, and <td>
tags. The table will have three columns and eight rows. Therefore, the HTML code should be like this:
<p class="row"> <p class="col-md-10 col-md-offset-1"> <table> <thead> <tr> <th> <h4>Free plan</h4> </th> <th> <h4>Standard plan</h4> </th> <th> <h4>Premium plan</h4> </th> </tr> </thead> <tbody> <tr> <td> <h3>$ 0</h3> </td> <td> <h3>$ 99</h3> </td> <td> <h3>$ 999</h3> </td> </tr> <tr> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> </tr> <tr> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> </tr> <tr> <td>Dolor sit amet</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> </tr> <tr> <td>-</td> <td>Dolor sit amet</td> <td>Lorem ipsum</td> </tr> <tr> <td>-</td> <td>-</td> <td>Lorem ipsum</td> </tr> <tr> <td><a href="#">Purchase</a></td> <td><a href="#">Purchase</a></td> <td><a href="#">Purchase</a></td> </tr> </tbody> </table> </p> </p>
Right now, we have no secrets in our table. Let's start using CSS Bootstrap styles! First of all, add the .table
class to the <table>
tag (duh!). This seems redundant, but it's an option of the framework used to make it explicit.
Then, we will apply some specific styles. To make the rows striped, we add the .table-striped
class to <table>
as well. We want this table to have borders, so we add the .table-bordered
class to make it like that. Last but not least, add the .table-hover
class to enable hover state in the <tbody>
rows.
Now we will move on to the <tr>
tag inside <thead>
. To make its background green, we add the .success
class. Similar to buttons, every cell, row, or table in a <table>
tag can receive color classes, officially called Bootstrap contextual classes.
Contextual classes follow the same colors meant for buttons. So, for the second column, we apply the .info
class to get a cyan background color, and we use a .danger
class to get a red background color in the last column.
Note
The framework also offers the .active
class, which offers the same color of hover and the .warning
class, which offers a yellow color.
Inside each <th>
tag, we have an <h4>
typography tag. If you take a look at the image showing how the table should look, you will notice that the heading texts are in the center. You may remember how to do that; just apply the .text-center
class in the headings.
The themed <thead>
tag will be like this:
<thead> <tr> <th class="success"> <h4 class="text-center">Free plan</h4> </th> <th class="info"> <h4 class="text-center">Standard plan</h4> </th> <th class="danger"> <h4 class="text-center">Premium plan</h4> </th> </tr> </thead>
Now we will move on to the first table row in <tbody>
, which is the price row. We just need to center <h4>
in the same way as we did in the <thead>
row—by adding the .text-center
class:
<h3 class="text-center">$ 0</h3>
The next five rows have no specific style, but the last one has buttons and some tricks!
Styling the buttons
Do you remember how to apply the color theme in the buttons? You just need to follow the <thead>
column color style, prepending .btn-*
in the Bootstrap contextual classes. For instance, the first one will have the .btn-success
class to turn a green button.
Furthermore, the button must fill the full width of the cell. To make the button span the complete parent width, add the .btn-block
class and the magic is completely done! The code for the last row is as follows:
<tr> <td><a href="#" class="btn btn-success btn-block">Purchase</a></td> <td><a href="#" class="btn btn-info btn-block">Purchase</a></td> <td><a href="#" class="btn btn-danger btn-block">Purchase</a></td> </tr>