Documentation

Browse source code
Introduction Alerts Autosize Avatars Badges Breadcrumb Buttons Cards Carousel Colors Cursors Charts Divider Empty states Flags Form Elements Form helpers Input mask Progress Ribbons Spinners Steps Tables Tabs Timelines Toasts Tooltips Typography

Bootstrap documentation

Tables

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>

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>