Documentation

Browse source code
On this page

Tables

Bootstrap documentation

Basic Table

A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table:

Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User Edit
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin Edit
Mallory Hulme Geologist IV, Support mhulme2@domainmarket.com User Edit
Dunn Slane Research Nurse, Sales dslane3@epa.gov Owner Edit
Emmy Levet VP Product Management, Accounting elevet4@senate.gov Admin Edit 
<div class="table-responsive">
  <table class="table table-vcenter">
    <thead>
      <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Email</th>
        <th>Role</th>
        <th class="w-1"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td >Paweł Kuna</td>
        <td class="text-muted" >
          UI Designer, Training
        </td>
        <td class="text-muted"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
        <td class="text-muted" >
          User
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Jeffie Lewzey</td>
        <td class="text-muted" >
          Chemical Engineer, Support
        </td>
        <td class="text-muted"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
        <td class="text-muted" >
          Admin
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Mallory Hulme</td>
        <td class="text-muted" >
          Geologist IV, Support
        </td>
        <td class="text-muted"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
        <td class="text-muted" >
          User
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Dunn Slane</td>
        <td class="text-muted" >
          Research Nurse, Sales
        </td>
        <td class="text-muted"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
        <td class="text-muted" >
          Owner
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Emmy Levet</td>
        <td class="text-muted" >
          VP Product Management, Accounting
        </td>
        <td class="text-muted"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
        <td class="text-muted" >
          Admin
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Responsive tables

Across each breakpoint, use .table-responsive class for horizontal scrolling tables. Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a specific breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Heading 7 Heading 8 Heading 9 Heading 10
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell 
<table class="table table-responsive">
  <thead>
    <tr>
      <th>#</th>
      <th class="text-nowrap">Heading 1</th>
      <th class="text-nowrap">Heading 2</th>
      <th class="text-nowrap">Heading 3</th>
      <th class="text-nowrap">Heading 4</th>
      <th class="text-nowrap">Heading 5</th>
      <th class="text-nowrap">Heading 6</th>
      <th class="text-nowrap">Heading 7</th>
      <th class="text-nowrap">Heading 8</th>
      <th class="text-nowrap">Heading 9</th>
      <th class="text-nowrap">Heading 10</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

No wrap

Prevents table cell content from wrapping to another line.

Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates. Edit
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates. Edit
Mallory Hulme Geologist IV, Support mhulme2@domainmarket.com User Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates. Edit
Dunn Slane Research Nurse, Sales dslane3@epa.gov Owner Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates. Edit
Emmy Levet VP Product Management, Accounting elevet4@senate.gov Admin Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates. Edit 
<div class="table-responsive">
  <table class="table table-vcenter table-nowrap">
    <thead>
      <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Email</th>
        <th>Role</th>
        <th></th>
        <th class="w-1"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td >Paweł Kuna</td>
        <td class="text-muted" >
          UI Designer, Training
        </td>
        <td class="text-muted"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
        <td class="text-muted" >
          User
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.</td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Jeffie Lewzey</td>
        <td class="text-muted" >
          Chemical Engineer, Support
        </td>
        <td class="text-muted"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
        <td class="text-muted" >
          Admin
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.</td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Mallory Hulme</td>
        <td class="text-muted" >
          Geologist IV, Support
        </td>
        <td class="text-muted"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
        <td class="text-muted" >
          User
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.</td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Dunn Slane</td>
        <td class="text-muted" >
          Research Nurse, Sales
        </td>
        <td class="text-muted"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
        <td class="text-muted" >
          Owner
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.</td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Emmy Levet</td>
        <td class="text-muted" >
          VP Product Management, Accounting
        </td>
        <td class="text-muted"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
        <td class="text-muted" >
          Admin
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.</td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>