React Bootstrap — Responsive Tables and Tabs

Photo by Raphael Nogueira on Unsplash

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add responsive tables and tabs with React Bootstrap.

Responsive

We can add a responsive prop to make the table responsive.

To make it always responsive, we add the prop without a value.

So we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Table from "react-bootstrap/Table";
export default function App() {
  return (
    <>
      <Table responsive>
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <td>2</td>
            <td>mary</td>
            <td>jones</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">larry</td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}

We can also make it responsive on specific breakpoints.