CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapreactjs
chinds
chinds

Reputation: 1829

react JS bootstrap JS not working

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.

Upvotes: 2

Views: 7114

Answers (2)

hamzeh_pm
hamzeh_pm

Reputation: 317

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

Upvotes: 2

Siddharth
Siddharth

Reputation: 1769

<!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

Upvotes: 4

Related Questions