I don't have border on react-bootstrap-table-next

Question

I use react-bootstrap-table-next in this way:

import React, { Component } from 'react';
import products from './data.js';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'price',
  text: 'Product Price'
}];

class App extends Component {
  render() {
    return (
      <BootstrapTable keyField='id' data={ products } columns={ columns } />
    );
  }
}

export default App;

But, there is no border.

What I'm missing?

Answer 1

I had the exact same issue. It requires bootstrap CSS like others mentioned. In a typical react app, you'll want to install bootstrap via npm and then import the bootstrap CSS with this line.

import 'bootstrap/dist/css/bootstrap.min.css';