Download

Bootstrap table (currently v1.13.1) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

Source code

Source CSS, JavaScript, locales, and extensions, along with our docs.

Download source

Clone or fork via GitHub

Via GitHub

CDN

The folks over at CDNJS and bootcss graciously provide CDN support for CSS and JavaScript of Bootstrap table. Just use these CDN links.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.js"></script>

<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/locale/bootstrap-table-zh-CN.min.js"></script>

Bower

Install and manage Bootstrap table’s CSS, JavaScript, locales, and extensions using Bower.

$ bower install bootstrap-table

What’s included

The Bootstrap table source code download includes the pre-compiled CSS, JavaScript, locales, extensions, and provides both compiled and minified variations, along with documentation. More specifically, it includes the following and more:

bootstrap-table/
├── dist/
│   ├── extensions/
│   ├── locale/
│   ├── bootstrap-table.min.css
│   └── bootstrap-table.min.js
├── docs/
└── src/
    ├── extensions/
    ├── locale/
    ├── bootstrap-table.css
    └── bootstrap-table.js

The src/, locale/, and extensions/ are the source code for our CSS, JS. The dist/ folder includes everything compiled and minified with src/. The docs/ folder includes the source code for our documentation. Beyond that, any other included file provides support for packages, license information, and development.

Usage

Include Bootstrap library (if your project doesn’t use it already) and bootstrap-table.css in the head tag your HTML document.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

Include jQuery library, bootstrap library (if your project doesn’t use it already) and bootstrap-table.js in the head tag or at the very bottom of your document, just before the closing body tag (usually recommended for better performance).

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="bootstrap-table-zh-CN.js"></script>

The Bootstrap Table plugin displays data in a tabular format, via data attributes or JavaScript.

Via data attributes

Activate bootstrap table without writing JavaScript. Set data-toggle="table" on a normal table.

<table data-toggle="table">
  <thead>
    <tr>
      <th>Item ID</th>
      <th>Item Name</th>
      <th>Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Item 1</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Item 2</td>
      <td>$2</td>
    </tr>
  </tbody>
</table>

We can also use remote URL data by setting data-url="data1.json" on a normal table.

<table data-toggle="table" data-url="data1.json">
  <thead>
    <tr>
      <th data-field="id">Item ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

You can also add pagination, search, and sorting to a table like the following table.

<table data-pagination="true" data-search="true" data-toggle="table" data-url="data1.json">
  <thead>
    <tr>
      <th data-sortable="true" data-field="id">Item ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

Via JavaScript

Call a bootstrap table with id table with JavaScript.

<table id="table"></table>

$('#table').bootstrapTable({
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }],
  data: [{
    id: 1,
    name: 'Item 1',
    price: '$1'
  }, {
    id: 2,
    name: 'Item 2',
    price: '$2'
  }]
});

We can also use remote URL data by setting url: 'data1.json'.

$('#table').bootstrapTable({
  url: 'data1.json',
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }, ]
});