`Unable to activate Bootstrap dropdown feature`

Having an issue with the dropdown menu on my Bootstrap navbar - when I click it, nothing happens. I've tried various solutions found online, such as moving the

<script type="text/javascript" src="js/jquery-3.3.1.min"></script>
file to the top of my code, but it hasn't resolved the problem. I've also explored suggestions from this link without success.

       <!DOCTYPE html>

<html>

<head>


    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, 
maximum-scale=1, minimum-scale=1, width=device-width" />

    <meta http-equiv="Content-Security-Policy" content="default-src * 
'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Bob mobile</title>
</head>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Bob</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" 
aria-label="Toggle navigation" style="">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarColor01">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)
</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
       <input class="form-control mr-sm-2" type="text" placeholder="Search">
       <button class="btn btn-secondary my-2 my-sm-0" 
type="submit">Search</button>
    </form>
  </div>
</nav>




    <div class="app">

    </div>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min"></script>
    <script type="text/javascript" src="js/popper.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

</body>

</html>

This is my first time working with Twitter Bootstrap, appreciate any assistance. Thank you!

Answer №1

It seems that the main issue in your situation is:

You have not included the popper.js file, which is crucial for any pop-up or drop-down functionality.

Ensure that you include the following files in the specified order:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the disappearance of CSS styles when attempting to modify the className in react js?

I am currently working on a basic react application, and I am trying to dynamically change the name of a div element using the following code snippet - <div className={'changeTab ' + (page.login ? 'leftSide' : 'rightSide')} ...

Fuzzy backdrop with razor-sharp edges

In the process of designing a website, I am in need of a header with a blurred background that retains sharp edges. To achieve this effect, I implemented the use of ::before in my CSS code. Current Outcome: (For full clarity, it may be necessary to view ...

Organizing JSON objects into groups of x items

I am working with dynamically generated JSON data that needs to be grouped by a specific number. I have a method for generating the variable representing the grouping number, but now I need to organize the items based on that number. Here is the original J ...

In Firefox, the functionality of applying background-position-y to a label when it is immediately preceded by a checked input[type=radio]

CSS selector input[type=checkbox]:checked + label is not functioning properly in Firefox browser! label { display: block; font-family: 'Muli'; font-size: 14px; color: #666; vertical-align: top; background: url("https://s31.postimg. ...

Using an Ajax call within an event handler function

After spending a full day attempting to execute an AJAX call within an event handler function, I've tried various combinations of when(), then(), and done(), as well as setting async: false. However, I keep encountering undefined errors despite my eff ...

a div sandwiched between two others

I am trying to nest a <div> within another <div> and center it within the parent. Here is my current approach: <div id="redthing"> <div id="whitebox" > </div> </div> The CSS code I am using is as follows: #red ...

I am encountering issues with my AJAX request

Having a form on my website that sends submissions to my email address has been an issue. Initially, the form successfully submitted data but would redirect users to another page upon completion. Below is the HTML code for the form: <f ...

Tips for updating a link's href using its text content

I need help with replacing the login link in a text, but only if it says "Log In". Occasionally it will say "My Account": <div id="Login_T4304F19B025"> <a href="/login1">Log in</a> </div> Is there a way to use jQuery to update ...

Difficulty arises when attempting to pass a PHP variable as an argument within a MySQL query

My current task involves using a PHP variable as a search term in querying a MySQL database. First, I retrieve the variables from an HTML form: <?php //Set up variables $vals = array($_POST["id_number"], $_POST["id_name"], $_POST["id_submitname"]); $ke ...

What is the best way to run a JavaScript function once another function has finished executing?

I am looking to ensure that a JavaScript function runs only after another one has finished executing. Here is the code I currently have: $(window).load(function(){ $('#dvLoading').fadeOut(2000); }); window.addLoadEvent = function() { $('#p ...

Having difficulty retrieving parameter data from AJAX post method in the controller

id_estado is showing up as null in the cidade controller Is the URL $.post parameter being called correctly? var base_url = "<?php echo base_url(); ?>"; $(function(){ $('#estados').change(function(){ var id_estado = $('#e ...

I am looking to concatenate the existing URL with the language segment using jQuery

Looking to update the URL when clicking on a language name? Simply add the current path after the language section. For example, change the URL https://example.com/de_DE/about-us/ to https://example.com/us_EN/about-us/ and vice versa. I attempted this code ...

Ways to implement a percentage for scrollTop

I'm currently troubleshooting the code below. My goal is to understand why I'm unable to scroll the .post div with jQuery and input range properly using a percentage value like this: $("[type=range]").on('input',function(){ var v ...

Clickable PDF Button for Quick Website Access

Is there a way to create a button on an HTML page that remains functional when the page is saved as a PDF? I want the button to link to a webpage so that users can click on it in the PDF and be redirected to the link. ...

Issues with displaying or hiding a DIV using javascript - popup box unresponsive

I am working with this ASPX code: <div id="IsAccountingOk" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a><br /> <asp:Label ID="lblIsAccountingOkHeader" runat="server" Text ...

An error occurred while trying to access the 'length' property of an undefined value in a code using ColdFusion and jQuery DataTable

I'm currently working on a ColdFusion page to generate a jQuery DataTable that retrieves JSON data. Even though I have set up the DataTable in jQuery and provided the correct URL for fetching the data, I keep encountering this error Uncaught TypeE ...

Converting a CSS Submenu from Horizontal to Vertical Orientation

Below is the current code snippet for my menu navigation bar: To access my live blog, please click on this link: www.4time2fun.com <div id="topmenu"> <div id="navigation"> <ul class="categories"> <li class="articles"> <a href ...

Manipulating class properties in AngularJS from a controller

I won't dwell on the reason for this (it's required to override some behavior in Angular Material that is causing issues in Safari), but here is what I am attempting to accomplish: HTML: <style> .changeme{ height: 300px; } </st ...

What is the best way to start tiny-slider automatically once the video has ended?

I am currently using the tns-slider plugin and have a setup with 3 slides (2 photos and 1 video). <div class='tiny-slider'> <div class='slide slide1'> <div class='video-slide'> <video id=&qu ...

Fluid Grid System with columns of specific dimensions

Recently delving into the world of Foundation Framework, I've just begun utilizing it for my projects. My current task involves crafting a responsive design with the help of the Foundation Grid system. Specifically, I've set up a grid layout for ...