Bootstrap stopped working with React

Yesterday everything my app was working well until today. I have a react application with Bootstrap. Today I refreshed my application, and all CSS with Bootstrap stopped working.

In my package.json is "react-bootstrap": "^0.31.5", I also added a link to a script in the index.html like this:

  <script src="http://code.jquery.com/jquery-3.2.1.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

For example, I added this code:

import { Navbar , Nav , Button , NavItem  } from "react-bootstrap";
import './../css/styles.css';

<Navbar>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#">React-Bootstrap</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href="#">Link 1</NavItem>
      <NavItem eventKey={2} href="#">Link 2</NavItem>
    </Nav>
    <Navbar.Form pullLeft>
      {' '}
      <Button type="submit">Submit</Button>
    </Navbar.Form>
  </Navbar.Collapse>
</Navbar>

and in my application is looking like this:

also GLyphicon not working like this:

 <Glyphicon glyph="align-left" />

When I click on this small button in Navbar, show menu for only 1 sec and drop it up.

Do you have any solution, to fix this?

If you are loading:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

that means you are loading Bootstrap 4.0.0 because that's the latest.

And because Bootstrap 4 is totally incompatible with Bootstrap 3 that breaks your layout.

Solution:

Either load the css (as well as the corresponding js) files for Bootstrap 3 OR migrate to Bootstrap 4.

However, migrating to Bootstrap 4 would require you to manually adjust everything for Bootstrap 4 which can take quite some time to do depending on how much stuff you have in your application.

If you just want to fix the navbar for Bootstrap 4, I can help you do that if you post it as a separate question.