Tables

Documentation and examples for opt-in styling of tables.

Default style

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
        
            <table class="table">
                <thead class="thead-light">
                    <tr>
                        <th scope="col">#</th>
                        <th class="text-uppercase" scope="col">First</th>
                        <th class="text-uppercase" scope="col">Last</th>
                        <th class="text-uppercase" scope="col">Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    ...
                </tbody>
            </table>
        
    

Color table

Change the color of the table using .table-{color}.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
        
            <table class="table table-primary">
                <thead class="table-active">
                    <tr>
                        <th scope="col">#</th>
                        <th class="text-uppercase" scope="col">First</th>
                        <th class="text-uppercase" scope="col">Last</th>
                        <th class="text-uppercase" scope="col">Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    ...
                </tbody>
            </table>
        
    

Pricing table

Create a pricing table easily with the help of the .pricing-table class.

Basic
$0
forever Get started
Standard
$5
per month Get started
Unlimited
$10
per month Get started
Downloads
per month
5 15 Unlimited
Email support
24/7 support
Yes Yes Yes
White Labeling
use your branding
- Yes Yes
        
            <table class="table shadow pricing-table table-responsive-md">
                <thead>
                    <tr>
                        <th scope="col"></th>
                        <th scope="col">
                            <span class="h4 font-weight-normal">Basic</span>
                            <div class="d-flex">
                                <span class="h4 font-weight-normal mt-1">$</span><span class="display-4 font-weight-bold">0</span>
                            </div>
                            <small class="d-block text-muted">forever</small>
                            <a class="btn btn-sm btn-outline-primary rounded-pill mt-4" href="#">Get started</a>
                        </th>
                        ...
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">Downloads<br><small class="text-secondary">per month</small></th>
                        <td>5</td>
                        <td>15</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <th scope="row">Email support<br><small class="text-secondary">24/7 support</small></th>
                        <td>
                            <i class="far fa-check-circle fa-lg text-success" aria-hidden="true"></i>
                            <span class="sr-only">Yes</span>
                        </td>
                        <td>
                            <i class="far fa-check-circle fa-lg text-success" aria-hidden="true"></i>
                            <span class="sr-only">Yes</span>
                        </td>
                        <td>
                            <i class="far fa-check-circle fa-lg text-success" aria-hidden="true"></i>
                            <span class="sr-only">Yes</span>
                        </td>
                    </tr>
                    ...
                </tbody>
            </table>
        
    

Bootstrap Documentation