Bootstrap 4 Tables

Diana Caliman -

Introduced by Twitter, Bootstrap is an open-source UI framework. It provides ready to use templates and styles that you can use to develop a UI. If previously you had to use a combination of HTML, CSS, and JavaScript even for simple things such as small animations, now, by merely importing Bootstrap libraries and use the required styles and templates.

 

Why use Bootstrap?

This free collection of tools can be used for creating websites and web applications.

Main advantages of working with Bootstrap include that it is easy to get started with it. You just have to download it and start coding.

Its grid system is amazing, and so is its base styling for most of HTML’s elements. Bootstrap also comes with a bundle of reusable components and jQuery plugins.

Generally, it has been used for Responsive Design. And if we go ahead and call it a superhero of the CSS Frameworks, we aren’t exaggerating.

It is intuitive and an excellent choice when it comes to mobile first front-end framework because of its speed and secure web development.

Bootstrap is a sleek, intuitive, and a powerful mobile first front-end framework for faster and easier web development.

 

Bootstrap 4 Tables

Bootstrap 4, the latest version of Bootstrap, comes with opt-in tables.

To get started with Bootstrap tables you simply have to add the base class .table to any <table> element and then go ahead and customize it. On the most basic level, this is how a table looks:

 

<table class=”table”>
<thead>
<tr>
<th>Fullname</th>
<th>Biggest secret</th>
<th>Level of adorableness</th>
</tr>
</thead>
<tbody>
<tr>
<td>Misha the Fluffy Kitten King</td>
<td>Is afraid of the cat in the mirror.</td>
<td>1000+</td>
</tr>
<tr>
<td>Chewy the Mushy Pug</td>
<td>Has an affair with the neighbour’s corgi. </td>
<td>Too high</td>
</tr>
<tr>
<td>Kibo the Giant Baby Doggo</td>
<td>Loves eating mud.</td>
<td>1000+</td>
</tr>
</tbody>
</table>

Awesome! Let’s go ahead now and talk about the classes that can be used to customize the table we just created.

 

.table-striped

This one adds zebra-like stripes to the table. Just like this:

 

.table-bordered

This one adds borders to all the rows and columns.

 

.table-hover

Adds a grey background hover effect on the table’s rows.

 

.table-dark

Turns the table’s background black.

 

 

.table-sm

Cuts the cell padding in half.

 

.thead-dark

Modifier class that turns the table’s header background color into dark grey. You add this one to the table’s head <thead class=’thead-dark’>.

 

.thead-light

Same as the previous one, just that this turns the header’s background into a tables’slight grey. This should also be added tables’ head. So the code will look like this: <thead class=’thead-light’>.

 

Contextual classes

They can be used to color cells, rows or the entire table. However, they don’t work on dark background tables. I’ll show you how these classes look added to the rows. The code would look like this: <tr class=”table-primary”> … </tr>.

To add the color to an individual cell, you just have to use the class like so: <td class=”table-primary”> … </td>.

.table-primary for the color BLUE, which suggests importance.

.table-success for the color GREEN, which suggests positivity or success.

.table-danger for the color RED, which suggests negativity or danger.

 

.table-info for the color LIGHT BLUE, which suggests an informative action

.table-warning for the color ORANGE, which indicates a warning

.table-active for the color GREY, which applies the hover color

 

.table-secondary for the color GREY, applied to less important things

.table-light for LIGHT GREY

.table-dark for DARK GREY

 

And by the way, these classes can not be used on dark tables.

 

Responsive tables

The .table-responsive class, wrapped around the .table (see code below) will make the table responsive.

<div class=”table-responsive”>
<table class=”table”>
…
</table>
</div>

There is also the breakpoint specific option, which refers to choosing the the breakpoint at which the table will get a scroll.

The options are as follows:

.table-responsive-sm for the 576px breakpoint

.table-responsive-md for the 768px breakpoint

.table-responsive-lg for the 992px breakpoint

.table-responsive-xl for the 1200px breakpoint

 

Super easy, right? Yet another “Bootstrap making it easier” kind of thing. Go make some tables now, and enjoy Bootstrap 4’s features.