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?

Try removing import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'; — Dinesh undefined, Jul 10 '18 at 04:57
It doesn't help. But, that file is necessary by documentation. — tesicg, Jul 10 '18 at 05:23
I'm sorry. It is required. Please check css files is loaded or not in network calls in browser — Dinesh undefined, Jul 10 '18 at 05:27
check your bootstrap version, they are compatible with bootstrap 3 only. You can find this here. https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html — Krina Soni, Jul 10 '18 at 05:35
I've created my react app by using Visual Studio Code with: create-react-app my-app. — tesicg, Jul 10 '18 at 05:45

score 6 · Answer 1 · answered Jan 17 '19 at 21:24

6

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';

answered Jan 17 '19 at 21:24

Zip184

1,792
2
21
34

score 5 · Accepted Answer · answered Jul 10 '18 at 14:45

I'm the creator of react-bootstrap-table, please check https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html.

obviously, you are missing to add bootstrap css or there're some problem when you add bootstrap css.

Allen

score 0 · Answer 3 · answered Jul 10 '18 at 05:38

0

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 }
        striped
        hover
        condensed
     />
    );
  }
}

export default App;

Try this.

answered Jul 10 '18 at 05:38

Krina Soni

870
6
14

It doesn't help. – tesicg Jul 10 '18 at 05:41
Try adding this bordered = true in BootstrapTable – Krina Soni Jul 10 '18 at 05:43
react-bootstrap-table2 need you to add bootstrap css in your application firstly. About bootstrap css, we only compatible with bootstrap 3 but will start to compatible for bootstrap 4 on v0.2.0 This is as per official documentation. Can you take check ? – Krina Soni Jul 10 '18 at 06:15
How to check it? – tesicg Jul 10 '18 at 06:37
All their examples work correctly, but my basic sample doesn't work. In the same browser. – tesicg Jul 10 '18 at 06:39

score 0 · Answer 4 · answered Dec 07 '18 at 18:19

0

The bootstrap reference needs to be added to index.html as below:

https://getbootstrap.com/docs/4.0/getting-started/introduction/

answered Dec 07 '18 at 18:19

jedd

420
1
6
13

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

4 Answers4