Learning Bootstrap 4 - Second Edition

Coding tables

Tables in Bootstrap 4 are largely unchanged from the previous version of the framework. However, there are a few new things, like inverse color table options and responsive tables. Let's start with the basics and we will build in the new features as we go.

Setting up the basic table

The basic table structure in Bootstrap takes advantage of almost all the available HTML table tags. The header is wrapped in <thead> and the body <tbody> tags. This will allow additional styling as we get into the inverse table layout. For now, let's see how we put together a basic table in Bootstrap:

<table class="table"> <thead> <tr> <th>first name</th> <th>last name</th> <th>twitter</th> </tr> </thead> <tbody> <tr> <td>john</td> <td>smtih</td> <td>@jsmtih</td> ...