引导程序安装在 ReactJS 应用程序中，但没有样式

Question

I am new in ReactJS

I have created a child component called footer and also installed Bootstrap package but not receiving any style in footer.

Code App.js --

import React, { Component }from 'react';
import './App.css';
import Header from './components/header';
import Footer from './components/footer';

class App extends Component {
    render() {
        return (
            <div>
                <Header />
                <Footer />
            </div>
        );
    }
}

export default App;

Footer.js under components folder

import React from 'react';

const Footer = () => {

    return (
        <footer className="page-footer font-small blue">
            <div className="footer-copyright text-center py-3">© 2019 Copyright:
                <a href="http://www.google.co.uk/">Test.com</a>
            </div>
        </footer>
    );
};

export default Footer;

index.js --

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.register();

But there is no styling in footer.

Any help is highly appreciated.

Answer 1

Your code looks fine. Stop your running code and restart again it will work. first time of installation of bootstrap required re-render from start.

Answer 2

Well, the problem is that you don't import bootstrap properly, do you have import errors in your console?

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

try to import by one of i written above.

Answer 3

In your app.css import bootstrap.css like this

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

Then restart your server

Answer 4

That simply means you did not correctly import bootstrap, i dont know how your code is structured so i would suggest you use the cdn version below and link it in your index.html file.

<link

rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

this means you have to online everytime you use it. Another option i would suggest is that you use reactstrap which would be easier for you as a beginner. install by using npm install --save reactstrap and then you can use it any component you want. you google the documentation for more details.