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