How to use bootstrap table in Next.js

Cover Image for How to use bootstrap table in Next.js
Ali Bentaleb
Ali Bentaleb

BootStrap is a front-end open source toolkit, which let you quickly design and customize responsive mobile-first sites.

In this tutorial, we are going to see: - How to configure bootstrap in React based framework like Next.js - How to add bootstrap table in Next.js

Setup bootstrap in Next.js

To use bootstrap in a React based framework project like Next.js,

First, install it using:

## npm
npm i bootstrap

## yarn

yarn add bootstrap

Second, create pages/_app.js file and include the bootstrap CSS file

import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.css'

function MyApp({ Component, pageProps }) {
  return (

    <Component {...pageProps} />

export default MyApp

And that's it, all good to go.

Add bootstrap table in Next.js

Now, let's add table using bootstrap

create pages/table.js and copy the following:

import homeStyles from '../styles/Home.module.css'
export default function ()  {

    return (<div className={homeStyles.cla}><table className="table ">
    <thead >
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>

        <th scope="col">Handle</th>
        <th scope="row">1</th>

        <th scope="row">2</th>
        <th scope="row">3</th>

        <td>the Bird</td>
  </table> </div>)


The classname _table_ in bootstrap format our table for us and make it also responsive.

Add also this CSS class if you wish to center the table


.cla {

  width: 50%;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
And the result looks like when you hit: _http://localhost:3000/table_

bootstrap table in next.js

If you are more interested in responsive React table component out of the box, i recommend to check my article about material ui table in nextjs.

Or you can check also ant design table based on React with cool features in this link

6 important features for Ant D...How to easily change basePath ...

More interesting articles