How to use bootstrap table in Next.js

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 >
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>

        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>

      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>

        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </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

styles/Home.module.css

.cla {

  width: 50%;
  align-items: center;
  justify-content: center;
  margin:auto;
  margin-top: 2rem;
 
}

And the result looks like when you hit: _http://localhost:3000/table_

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