Rounded Tables in Bootstrap 4

Here is a simple way to implement a table with rounded corners using Bootstrap 4. Note the wrapper "card" class, this is what gives the table the rounded corners. This new class replaces the "panel panel-default" classes that previously allowed for rounded corners in Bootstrap 3.

<div class="card">
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Created On</th>
                    <th>Updated On</th>
                </tr>
            </thead>
            <tbody>
                <?php if(count($users) > 0): ?>
                    <?php foreach($users as $user): ?>
                        <tr>
                            <td><?php echo $user['firstName']; ?></td>
                            <td><?php echo $user['lastName']; ?></td>
                            <td><?php echo $user['email']; ?></td>
                            <td><?php echo $user['createdAt']; ?></td>
                            <td><?php echo $user['updatedAt']; ?></td>
                        </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr><td colspan="6">No Users</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

Copy Snippet to Clipboard

Rounded Tables in Bootstrap 4

Don't Have an Account?