CODEWITHSUNDEEP
reactjsjsx
Mahmudul Hasan
Mahmudul Hasan

Reputation: 11

Bootstrap is not working properly in my reactjs project

First of all, I am truly new in reactjs. I am trying to design my react project using bootstrap. For some reasons it's not working as it should be. Below is my code:

App.js

import React from 'react';
import './App.css';
import Menu from '../components/Menu/Menu';

function App() {
  return (
    <div className="App">
      <Menu />
    </div>
  );
}

export default App;

Menu.js

import React from 'react'
import * as ReactBootstrap from 'react-bootstrap'

const Menu = () => {
    return (
        <div id="menu_container">
            <ReactBootstrap.Navbar bg="dark" variant="dark">
                <ReactBootstrap.Navbar.Brand href="#home">Navbar</ReactBootstrap.Navbar.Brand>
                <ReactBootstrap.Nav className="mr-auto">
                    <ReactBootstrap.Nav.Link href="#home">Home</ReactBootstrap.Nav.Link>
                    <ReactBootstrap.Nav.Link href="#features">Features</ReactBootstrap.Nav.Link>
                    <ReactBootstrap.Nav.Link href="#pricing">Pricing</ReactBootstrap.Nav.Link>
                </ReactBootstrap.Nav>
                <ReactBootstrap.Form inline>
                    <ReactBootstrap.FormControl type="text" placeholder="Search" className="mr-sm-2" />
                    <ReactBootstrap.Button variant="outline-light">Search</ReactBootstrap.Button>
                </ReactBootstrap.Form>
            </ReactBootstrap.Navbar>
        </div>
    )
}

export default Menu;

Index.js

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

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

serviceWorker.unregister();

Current Output:

Current output

Output I want:

Output I want

Upvotes: 0

Views: 3176

Answers (2)

Jayanth MKV
Jayanth MKV

Reputation: 313

Make sure you add the CDN link in index.html. Although you found it this would help others.

<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"/>

or add this in app.css

@import "bootstrap/dist/css/bootstrap.css";

Upvotes: 1

MaCadiz
MaCadiz

Reputation: 1807

You have some .css files that are imported in App.js and index.js. Maybe they are overriding some bootstrap rules.

I took your code here https://codesandbox.io/s/test-react-bootstrap-75rsd, removed the App.css and index.css imports and it looks just as you want.

Upvotes: 0

Related Questions