Bootstrap 4 By Example

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:

<div class="row"> <div 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> ...