Bootstrap 4 Table Inverse

Bootstrap has announced the first alpha release of Bootstrap 4. Bootstrap 4 is built using Sass, instead of Less and comes with an improved grid, outline buttons and what we are going to look at today, inverse table.See the Pen Bootstrap 4: Table Inverse by Brandon Himpfen (@brandonhimpfen) on CodePen.

Bootstrap Table Inverse HTML

There is no need to extend Bootstrap with CSS, as inverse table is included in Bootstrap 4. All you have to do is add the table-inverse class to the table tag.

Before:

<table class="table">

After:

<table class="table table-inverse">

That’s it!

Here is an example inverse table you can use as a starting point.

 
Table headingTable headingTable headingTable headingTable headingTable heading

Table cellTable cellTable cellTable cellTable cellTable cell

Table cellTable cellTable cellTable cellTable cellTable cell

Table cellTable cellTable cellTable cellTable cellTable cell

#
1
2 3