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
        
            <div class="table-responsive">
                <table class="table shadow-sm pricing-table">
                    <thead>
                        <tr>
                            <th scope="col"></th>
                            <th scope="col">
                                <div class="h4 mb-1">Basic</div>
                                <div class="d-flex">
                                    <span class="h4 font-weight-normal mt-1">$</span><span class="h1">0</span>
                                </div>
                                <small class="d-block text-muted mb-4">forever</small>
                                <a class="btn btn-sm btn-outline-primary rounded-pill" href="#">Get started</a>
                            </th>
                            <th scope="col">
                                <div class="h4 mb-1">Standard</div>
                                <div class="d-flex">
                                    <span class="h4 font-weight-normal mt-1">$</span><span class="h1">5</span>
                                </div>
                                <small class="d-block text-muted mb-4">per month</small>
                                <a class="btn btn-sm btn-primary rounded-pill" href="#">Get started</a>
                            </th>
                            <th scope="col">
                                <div class="h4 mb-1">Unlimited</div>
                                <div class="d-flex">
                                    <span class="h4 font-weight-normal mt-1">$</span><span class="h1">10</span>
                                </div>
                                <small class="d-block text-muted mb-4">per month</small>
                                <a class="btn btn-sm btn-outline-primary rounded-pill" 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>
                        <tr>
                            <th scope="row">White Labeling<br><small class="text-secondary">use your branding</small></th>
                            <td>-</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>
            </div>
        
    

Bootstrap Documentation