Skip to content
Get packs

Guide · Open source

How to use bootstrap-table: install, configure and get started

Updated · written with AI from the project's own documentation and checked against our catalogue data

Bootstrap Table is a free, MIT-licensed JavaScript plugin that turns a plain HTML table into a more feature-rich one, with column sorting, pagination, row selection and AJAX data loading. This guide is for web developers who want an interactive data table in a page without building one from scratch. By the end you will know how to install it, what it needs, and where to find the options it supports.

Bootstrap Tablewenzhixin/bootstrap-table · ★ 11.8k · MIT

Quick start

  1. 1Check prerequisites. Install Node.js and either npm or Yarn if you plan to use a package manager.
  2. 2Install the package. Run npm install bootstrap-table or yarn add bootstrap-table in your project folder.
  3. 3Include Bootstrap in your page. Bootstrap Table is designed to work with Bootstrap, so your page should already use Bootstrap's CSS.
  4. 4Mark up a plain HTML table. Start with a standard table element that holds your rows and column headers.
  5. 5Set options. Add configuration with data attributes or JavaScript options, such as sorting or pagination.
  6. 6Check the docs for option names. Use bootstrap-table.com to confirm the exact option names and behaviour for your version.

What bootstrap-table does and who it is for

Bootstrap Table extends a standard HTML table. Its README lists features such as simple column sorting with a click, single or multiple row selection, powerful pagination, show/hide columns, card view, detail view, localization and extensions.

It is designed for Bootstrap and, according to its description, also works with Semantic UI, Bulma, Material Design, Foundation and Vue.js. It is a code library, so it must be integrated into a web project; it is not a finished app.

  • Good fit: developers already using Bootstrap who need sortable, paginated tables
  • Good fit: admin dashboards and internal tools that list records
  • Not needed: a static table with no interactivity; plain HTML or CSS is simpler

Install bootstrap-table with npm or Yarn

The package-manager route needs Node.js and either npm or Yarn. Run one of the commands below in your project folder.

You can also download it from the Releases page or the source archive on GitHub, or load it from a CDN such as CDNJS, bootcss or jsDelivr.

  • Yarn: yarn add bootstrap-table
  • npm: npm install bootstrap-table
  • Manual download: GitHub Releases page or the source archive
npm install bootstrap-table

Configure the table with data attributes or JavaScript

The README says bootstrap-table is fully configurable and supports configuration via data attributes. This means you can set table behaviour directly in the HTML, or pass options from JavaScript.

The README does not include a full option reference or code sample, so check the official docs at bootstrap-table.com for exact option names before you build on them.

  • Data attributes: set options directly on the HTML table element
  • JavaScript options: pass a configuration object when you initialise the table
  • Examples: the bootstrap-table-examples repository on GitHub

Load data with AJAX in JSON format

The features list includes getting data in JSON format using AJAX, so the table can fill itself from a server endpoint instead of hard-coded rows.

Your server must return the data in JSON. The README does not show the request format, so consult the docs and examples for the exact setup.

Build or run a local copy for development

If you want to change the source, the README describes cloning the repository and serving the examples locally with http-server. The README also describes a local build that writes output to a dist directory.

Be sure to use a current version of yarn or npm, as the README advises.

yarn install yarn build

What people use it for

  • Sortable, paginated lists of records in an admin dashboard
  • Internal tools that display database records with row selection
  • Tables that load JSON from a server with AJAX
  • Responsive tables with fixed headers inside a Bootstrap page

Frequently asked questions

Is bootstrap-table free to use?

Yes. The README states it is licensed under the MIT License and that you can arbitrarily use and modify the plugin. Check the LICENSE file in the repository for the full terms.

How do I install bootstrap-table?

Use npm install bootstrap-table or yarn add bootstrap-table. You can also download it from the GitHub Releases page or load it from a CDN.

What do I need to use bootstrap-table?

The README lists Node.js and npm or Yarn for package-manager installs or local builds. It is designed to work with Bootstrap, and you need a web page to put it in.

Does bootstrap-table work with Vue.js or other frameworks?

The description says it supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation and Vue.js. The README does not describe how well it fits current framework versions, so test your setup.

How does bootstrap-table compare to DataTables or AG Grid?

Comparable projects include DataTables, AG Grid, Tabulator and Grid.js. This guide does not benchmark them, so compare features and fit for your project before choosing.

Why is my bootstrap-table not showing?

The README does not include a troubleshooting section. Check that Bootstrap's CSS and the plugin are both loaded, and look at the Stack Overflow tag or the online editor at live.bootstrap-table.com for examples.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Bootstrap Table is a good choice if you already use Bootstrap and need sortable, paginated tables with configuration through HTML or JavaScript. If you only need a static table, or want a finished app rather than a library to integrate, pick plain HTML or another tool.

Install options & downloads