CODEWITHSUNDEEP
reactjsreact-bootstrapreact-bootstrap-table
miyav miyav
miyav miyav

Reputation: 368

Default styles not applying to react-bootstrap components

My table is not using the styles from bootstrap.css

the imports in my container are as follows:

import React, { Component } from "react";
import "../styles/Projects.css";
import axios from "axios";
import { Button } from "react-bootstrap";
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';

export default class Projects extends Component {
    constructor(props) {
        super(props);

And the code below rendering the table looks like this:

        return (
        <div style={projectStyle}>
            <BootstrapTable
                selectRow={selectRow}
                keyField='id'
                data={this.state.projectList}
                columns={columns}
                pagination={paginationFactory(paginationOptions)}
            />
        </div>
    )

I don't know if i should have added the imports elsewhere for example in App.js since this is my first time using react.

It looks like this https://i.sstatic.net/wDieC.png and i want the styles to apply so it actually looks like at least half decent.

Upvotes: 0

Views: 417

Answers (1)

John
John

Reputation: 15

Try adding Bootstrap to the head of your HTML <head> <link rel="stylesheet" type="text/css" href="http://yourwebsite.come/yourbootstrap/bootstrapfile.css"> </head> In the href add your own URL to your CSS file! Hope this helps!

Upvotes: 1

Related Questions