Inexperienced with Bootstrap/CSS: Cannot open dropdown by clicking (CDN properly installed)

I am having trouble getting my Bootstrap dropdown to toggle correctly, despite placing the JS script last. I have checked multiple resources and it was suggested that CDN may not have been imported correctly. I have also tested this on different browsers with no success. Any advice on what I might be doing wrong? Thank you for your assistance!

.Jumbotron {
  background-color: rgb(211, 211, 211);
  padding: 50px;
}

.my_modal {
  margin: 50px;
  background-color: green;
  border-color: green;
}

.my_modal:hover {
  background-color: darkgreen;
  border-color: darkgreen;
}

.my_modal:onclick {
  border-color: darkgreen;
}
<!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.0 shrink-to-fit=no">
    <title>Bootstrap</title>

    <!-- Need this to run bootstrap that runs using CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Add style.css -->
    <link rel="stylesheet" href="style.css">
  </head>

  <body>

    <!-- Add A Navbar taken from Bootstrap -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">Disabled</a>
            </li>
          </ul>
          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>

    <!-- Add Jumbotron from Bootstrap -->
    <div class="Jumbotron">
      <h1 class="display-3">Hello World!</h1>
      <p class="lead">This is a simple hero unit, a simple jumbotron-style component
        for calling extra attention to featured content or information.</p>
      <hr class="my-4">
      <p>It uses utility classes for typography and spacing to space content out within
        the larger container.
      </p>
      <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">
          Learn more</a>
      </p>
    </div>

    <!-- Add Modal from Bootstrap  -->
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary my_modal" data-bs-toggle="modal" data-bs-target="#exampleModal">
      Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
       integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
         integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
           integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

</html>

Answer №1

If you have Bootstrap 4 imported, but are utilizing a Bootstrap 5 dropdown, there is an adjustment required.

You should swap out:

data-bs-toggle="dropdown"

For:

data-toggle="dropdown"

Thus, your code will look like this:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

Refer to Bootstrap 4 Docs for more information: https://getbootstrap.com/docs/4.6/components/dropdowns

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 method can be used to dynamically resize two side-by-side iframes in proportion to a specific ratio?

Hey, I've got this code snippet: So there are two iframes positioned side by side with a specific ratio as indicated in the link provided. My aim is to maintain that ratio regardless of the screen size where it's viewed. The first iframe is named ...

Is there a way for me to display the image name at the bottom before uploading it, and have a new div created every time I upload an image?

Is there a way to display the image name at the bottom and have it create a new div every time an image is uploaded? I would appreciate any help with this... <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstra ...

Having trouble getting items to align properly in Bootstrap

As a student, I am struggling with my development skills while attempting to create a personal website. I am encountering difficulty aligning items on my rows in bootstrap. Here is what I am trying to accomplish: 1. However, I am currently stuck at this po ...

Spacing before input text is found to be unnecessary and can be removed

Hello there, I've encountered a slight issue with a text input field that has border radius. The first character typed seems to protrude slightly outside the input field due to the border radius. Is there a way to add some extra whitespace before the ...

What could be causing the issue with the JS function that is preventing the button from

I am generating a button dynamically using my JavaScript function and then adding it to the DOM. Below is the code snippet: var button = '<button id="btnStrView" type="button" onclick=' + parent.ExecuteCommand(item.cmdIndex) + ' c ...

Adding JQuery to a running webpage using the DOM and Opera browser add-ons

I'm currently working on an Opera Extension and I have a question. Is there a way to use the includes folder in order to directly inject jQuery into the live HTML of a webpage? For example, can I change the background color of the DOM to black? If ...

The horizontal scroll feature is dysfunctional when attempting to allocate cell space based on a percentage

I want to display two sections of text that take up the full width of the screen and resize automatically when the screen size changes. Currently, I am using percentage widths to achieve this. However, when the text inside a section exceeds the available ...

Using jQuery to apply the "a" class with the addClass method

The html structure below is giving me trouble: <div class="sub"> <a href="#" id="people">People</a> </div> The CSS for the "a" element is as follows: color:#999999; font-size:31px; I am attempting to use jQuery to change ...

Excessive Blank Space Issue on Mobile Devices with MDBootstrap

I have been working on creating a replica of Watch2Gether, and it looks great on medium and large screens. However, when viewed on a phone, everything seems perfect until you scroll to the left and notice a large white space on the right side. I've ex ...

Modify the colors of <a> elements with JavaScript

I am brand new to the world of UI design. I am encountering an issue with a static HTML page. (Please note that we are not utilizing any JavaScript frameworks in my project. Please provide assistance using pure JavaScript code) What I would like to achie ...

Guide on achieving horizontal scrolling in Ionic 3

Check out this image I have a list of 10 names in an ion-scroll, but they are appearing on separate lines like paragraphs. Below is my HTML code: <ion-scroll scrollX="true" style="width:100vw; height:50px" > <ion-row class="headerChip"& ...

Issue with .get() method in jQuery affecting IE7, IE8, and IE9

While testing the sending and receiving of data to a PHP file using jQuery, I encountered an issue with Internet Explorer (I am using IE9, but I also checked on IE8 and IE7). When I click on one of my divs, I send an "ID" to the server and the PHP file re ...

Responsive Text and Alignment in the Latest Bootstrap 5

My goal is to center my div element while keeping the text aligned to the left. Here's the code I have: <div class="container"> <div class="row"> <div class="col"> <h1>< ...

Exciting effects activated by hovering on a button

I'm attempting to create an animated effect by having a rectangle expand over the button when hovered by the user. However, I am unsure how to achieve this and have hit a roadblock. Here's what I want: There's a button. There's a rect ...

Arranging SVG icons in a row within the navigation bar

Having trouble aligning the icons side by side? Even with margin and padding adjustments, I couldn't get it right. I've scoured multiple sites for a solution but couldn't find one. As an attempt to fix this, I created a bar with aligned butt ...

I am experiencing issues with the visibility of my background on certain mobile browsers

Apologies for repeating a similar question, but I've already tried the solutions mentioned in other posts. On my webpage, I have a table with a background image set using CSS. html { width:100% height: 100%; margin: 0px; padding: 0px; border: none; } ...

Adjust the background shade of the HTML <area> tag

I have an image containing over 100 geometrical shapes, each with unique sizes and dimensions. I utilized image mapping to assign IDs to each <area> tag such as <area id="1">. I stored information in a MySQL database about each shape, ...

Utilizing a function argument within the :not() selector

I am currently working towards the objective of selecting all elements in my document except for those within a specific class. This is what I have come up with so far: var x = document.querySelectorAll(":not(.myParameter)"); My aim is to make 'myPa ...

I'm baffled by this unsemantic grid - why is the final div getting pushed below the rest?

I am working with the unsemantic fluid grid system and aiming to create a row of divs that are all in line and together cover 100% of the page. <div class="grid-container"> <div class="grid-parent yy name-strip zz"> <div class="yello ...

Creating a sophisticated form design with multiple input fields using DIV elements in HTML

I am looking to create a multi-column form layout that allows each row to have a different number of fields. My initial approach was using tables and the colspan attribute within td tags for layout structure. However, I have learned that using tables for l ...