Bootstrap Tables

Our Bootstrap Tables are designed to be opt-in due to the widespread use of tables across third-party widgets like calendars and date pickers.
Keep reading some Bootstrap Tables examples to see how these tables work.

Examples

Simple Table with Actions

#	Name	Job Position	Since	Salary
1	Andrew Mike	Develop	2013	€ 99,225
2	John Doe	Design	2012	€ 89,241
3	Alex Mike	Design	2010	€ 92,144

<div class="card">
  <table class="table">
    <thead>
      <tr>
        <th class="text-center">#</th>
        <th>Name</th>
        <th>Job Position</th>
        <th>Since</th>
        <th class="text-right">Salary</th>
        <th class="text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text-center">1</td>
        <td>Andrew Mike</td>
        <td>Develop</td>
        <td>2013</td>
        <td class="text-right">&euro; 99,225</td>
        <td class="td-actions text-right">
          <button type="button" rel="tooltip" class="btn btn-info">
            <i class="material-icons">person</i>
          </button>
          <button type="button" rel="tooltip" class="btn btn-success">
            <i class="material-icons">edit</i>
          </button>
          <button type="button" rel="tooltip" class="btn btn-danger">
            <i class="material-icons">close</i>
          </button>
        </td>
      </tr>
      <tr>
        <td class="text-center">2</td>
        <td>John Doe</td>
        <td>Design</td>
        <td>2012</td>
        <td class="text-right">&euro; 89,241</td>
        <td class="td-actions text-right">
          <button type="button" rel="tooltip" class="btn btn-info btn-round">
            <i class="material-icons">person</i>
          </button>
          <button type="button" rel="tooltip" class="btn btn-success btn-round">
            <i class="material-icons">edit</i>
          </button>
          <button type="button" rel="tooltip" class="btn btn-danger btn-round">
            <i class="material-icons">close</i>
          </button>
        </td>
      </tr>
      <tr>
        <td class="text-center">3</td>
        <td>Alex Mike</td>
        <td>Design</td>
        <td>2010</td>
        <td class="text-right">&euro; 92,144</td>
        <td class="td-actions text-right">
          <button type="button" rel="tooltip" class="btn btn-info btn-simple">
            <i class="material-icons">person</i>
          </button>
          <button type="button" rel="tooltip" class="btn btn-success btn-simple">
            <i class="material-icons">edit</i>
          </button>
          <button type="button" rel="tooltip" class="btn btn-danger btn-simple">
            <i class="material-icons">close</i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Shopping Cart Table

	Product	Color	Size	Price	Qty	Amount
	Spring Jacket by Dolce&Gabbana	Red	M	€549	1	€549

<div class="card">
  <div class="table-responsive">
    <table class="table table-shopping">
      <thead>
        <tr>
          <th class="text-center"></th>
          <th>Product</th>
          <th class="th-description">Color</th>
          <th class="th-description">Size</th>
          <th class="text-right">Price</th>
          <th class="text-right">Qty</th>
          <th class="text-right">Amount</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="img-container">
              <img src="https://images.thenorthface.com/is/image/TheNorthFace/NF0A2VFL_619_hero" alt="..." rel="nofollow">
            </div>
          </td>
          <td class="td-name">
            <a href="#jacket">Spring Jacket</a>
            <br><small>by Dolce&amp;Gabbana</small>
          </td>
          <td>
            Red
          </td>
          <td>
            M
          </td>
          <td class="td-number">
            <small>&#x20AC;</small>549
          </td>
          <td class="td-number">
            1
            <div class="btn-group">
              <button class="btn btn-round btn-info btn-sm"> <i class="material-icons">remove</i> </button>
              <button class="btn btn-round btn-info btn-sm"> <i class="material-icons">add</i> </button>
            </div>
          </td>
          <td class="td-number">
            <small>&#x20AC;</small>549
          </td>
          <td class="td-actions">
            <button type="button" rel="tooltip" data-placement="left" title="Remove item" class="btn btn-simple">
              <i class="material-icons">close</i>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>