react JS bootstrap JS not working

Question

I am building a REACT JS application using bootstrap, the bootstrap CSS is working fine. however it does not seem to be loading the javascript as the menu toggle button does not activate/toggle the menu.

here is my index page which includes the query and javascript:

<!doctype html>
<html class="no-js" lang="">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width">

      <title>ICETEA</title>

      <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="/css/main.css">

      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>

    <div id="app"></div>

    <script src="/js/main.js"></script>

  </body>
</html>

There were no errors in the end. I was working from one directory and building form another hence why no changes were being pushed to the browser.

1 minute, i have just seen this error in the chrome console: Uncaught Error: Bootstrap's JavaScript requires jQuery It looks like my app may not be building correctly as browserify does not seem to reload the browser when I edit and save a file. — chinds
– chinds, Commented Oct 8, 2015 at 12:50
It looks like your jquery file hasn't loaded from the error you have shown.. — Guruprasad J Rao
– Guruprasad J Rao, Commented Oct 8, 2015 at 12:52

Siddharth · Accepted Answer · 2015-10-08 12:50:50Z

4

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Try this as I have done, try placing your Javascripts before the ending your body tag

answered Oct 8, 2015 at 12:50

Siddharth

1,7895 gold badges24 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sophie cai Over a year ago

Thank you! just saved me...didn't realize the .css file should come on top..

hamzeh_pm · Accepted Answer · 2021-11-29 07:23:51Z

2

I was looking for something and suddenly see this question, i put some update on answer so you guys can run bootstrap smoothly with react without anything else

first install 3 things

npm install bootstrap jquery @popperjs/core

then on you app or index ( meaning the parent component ) add this

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap";

then you can use all bootstrap things on you project like regular project and you even get autocomplete on bootstrap classes on some ide like webstrom, pycharm pro

Note: it add bootstrap 5 to you project so something like bootstrap 4 nav component wont work 100% try to use only bootstrap 5

answered Nov 29, 2021 at 7:23

hamzeh_pm

3172 silver badges12 bronze badges

Collectives™ on Stack Overflow

react JS bootstrap JS not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related