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:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com 
<table class="table">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@example.com</td>
    </tr>
  </tbody>
</table>

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.

Firstname Lastname Email
John Doe john@example.com Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas?
Mary Moe mary@example.com Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas?
July Dooley july@example.com Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas? 
<div class="table-responsive">
  <table class="table table-nowrap">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas?</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas?</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas?</td>
      </tr>
    </tbody>
  </table>
</div>