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.16787

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.

<div class="table-responsive">
    <table class="table table-inverse">
        <thead>
            <tr>
                <th>#</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </tbody>
    </table>
</div>