Displaying identical information in a bootstrap dropdown menu

I am working on implementing a navigation bar with Bootstrap dropdown functionality. Each button in the navbar has the same content displayed in the dropdown menu, such as the "Exercises" button showing assignments and the "Assignments" button also displaying assignments. You can refer to the official Bootstrap documentation for more information on creating dropdowns: https://getbootstrap.com/docs/4.0/components/dropdowns/

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Assignments
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="http://ec2-3-17-178-150.us-east-2.compute.amazonaws.com/home/home.php">Assignment 1: PHP Page</a>
                    <a class="dropdown-item" href="#">Assignment 2: My SQL Form <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">Assignment 3: JavaScript Validation/code <i>(Coming Soon)</i></a>
                </div>
            <!--Exercise dropdown info-->
            
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Exercises
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="http://ec2-3-17-178-150.us-east-2.compute.amazonaws.com/HelloWorld.php">CE01: Hello World<i>Coming Soon</i></a>
                    <a class="dropdown-item" href="#">CE02: Days of the Week <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE03: Using Forms and  $_POST <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE04: Story Idea Generator <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE05: Workbench Setup <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE06: Adding and removing from Database <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE07: Forum Database <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE08: Monster Manager <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE09: Adding and removing from Database <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE010: JavaScript Objects <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE011: JS Control <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE012: Session Control <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE013: Login<i>(Coming Soon) </i></a>
                    <a class="dropdown-item" href="#">CE014: Shopping Cart <i>(Coming Soon)</i></a>
                </div> 
  </body>
</html>
htmlcssbootstrap-4

Answer №1

You have assigned the same ID to both dropdown menus, please change one of them.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

   <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Assignments
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="http://ec2-3-17-178-150.us-east-2.compute.amazonaws.com/home/home.php">Assignment 1: PHP Page</a>
                    <a class="dropdown-item" href="#">Assignment 2: My SQL Form <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">Assignment 3: JavaScript Validation/code <i>(Coming Soon)</i></a>
                    
  </div>
</div>


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Exercises
  </button>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
 
   <a class="dropdown-item" href="http://ec2-3-17-178-150.us-east-2.compute.amazonaws.com/HelloWorld.php">CE01: Hello World<i>Coming Soon</i></a>
                    <a class="dropdown-item" href="#">CE02: Days of the Week <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE03: Using Forms and  $_POST <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE04: Story Idea Generator <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE05: Workbench Setup <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE06: Adding and removing from Database <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE07: Forum Database <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE08: Monster Manager <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE09: Adding and removing from Database <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE010: JavaScript Objects <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE011: JS Control <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE012: Session Control <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE013: Login<i>(Coming Soon) </i></a>
                    <a class="dropdown-item" href="#">CE014: Shopping Cart <i>(Coming Soon)</i></a>
  </div>
</div>



  </body>
</html>

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

Utilize Jsoup to retrieve a specific value from a designated HTML source

I am currently working on a project that involves extracting all currency values and their corresponding names from a specific website. These extracted values need to be stored in two separate arrays. While researching online, I came across some code snip ...

javahtmlparsingjsoup

Designing a charcoal square div featuring a see-through circular element at its center

I'm working on a design concept that involves creating a square div with a transparent circle in the center. The idea is to have an image as the background, with the transparent circle acting like a window through which the background image can be see ...

jqueryhtmlcss

Loading a form on the fly using jQuery

As I delve into the realm of web design, I encountered a perplexing issue that has left me stumped. My goal is to dynamically load a form into a div element using jQuery. Here's a snippet of my code: Inside the main file: $('#left_colum'). ...

phpjqueryhtmlajaxdynamic

Assistance needed in regards to relative positioning

I am working on a feature where the customer's shopping cart is displayed when they hover over "My Cart." I plan to achieve this effect using CSS, but I have encountered an issue with the size of .cart causing .my-cart to stretch... update The previ ...

csscross-browser

Modify the text or background shade of the Bootstrap date picker

I have successfully integrated the bootstrap date picker (view figure below) and it is functioning as expected. The code appears like this: <div class="input-group date"> <input name="departure" type="text" class="form-control" id="departure" ...

jquerycsshtmltwitter-bootstrap

Tips for retrieving user input and displaying it on an HTML page

I have encountered an issue with displaying user input in a table. The code for the table display is as follows: <tr ng-repeat="user in users" ng-class-even="'bg-light-grey'" ng-if="isLoading==false"> <td> ...

javascripthtmlangularjs

Hover effect on two divs changing states

I was so close to solving this issue, but I'm stuck on the final part. Here's the code snippet I've been working on: /* valuecanvas */ #wrappercs { margin-top: 3px; width: auto; height: auto; display: block; float: right; bac ...

htmlcss

bxSlider adds in an empty slide after deleting an image

Whenever I click a link in my navigation, I want to remove certain images from the page. I tried implementing a solution, but now I have two empty spaces where the images used to be. How can I remove those as well? I searched on Stack Overflow for a soluti ...

javascriptjqueryhtmlcssbxslider

Increase and decrease thumbnail size using an onclick event

https://i.sstatic.net/oDkB9.png I've been experimenting for hours to try and create a functionality where the thumbnail image on my HTML page enlarges when clicked, and then shrinks back down when clicked again. However, I'm encountering an issu ...

javascripthtmlcssthumbnailsimage-resizing

Send an array of data from the view to the Controller in CodeIgniter

I have been searching for a solution to this question. However, for some reason, my code is not functioning properly. Here is what I want to achieve: Data Array -> ajax post -> codeigniter controller(save data in DB and redirect to another page) ...

javascriptphphtmlajaxcodeigniter

Why isn't my div displaying in JavaScript?

Currently working on a project for the Odin Project front-end web development. My task involves creating a grid using javascript/jQuery. I attempted to use the createElement method but have encountered an issue in making the div visible within the html. Am ...

javascriptjqueryhtml

Steer your keyboard attention towards the parent element that embodies a list

My implementation focuses on making drop down menus accessible via keyboard input using HTML/CSS and JS/jQuery events. The goal of keyboard accessibility includes: Tab key to navigate the menu elements. Pressing the down arrow key opens a focused menu. ...

javascriptjqueryhtmlcssaccessibility

Tips for separating the 'title' and 'icon' elements within Bootstrap panels?

I am currently working on integrating a FAQ section into my website (not yet live, so I cannot provide a link). However, I am facing some minor CSS issues that I am struggling to resolve. The problem lies in a panel that is meant to display as shown below: ...

htmlcssbootstrap-4accordionpanel

Choose a paragraph of text that spans multiple lines without exceeding the width

In the image above, the red selection crosses outside of the yellow area when selecting. I would like to only select within the yellow part as shown below: Here is the HTML: <div id="parent"> <div id="child"> This is some content. ...

javascriptcss

Using jQuery or JavaScript to trigger a specific popup when clicking on an email link

I am looking to accomplish the following: The user will receive an email with a link. When they click the link from the email, it should take them to the homepage of the site where there are links. Clicking on a link should trigger a popup. However, I w ...

javascriptjqueryhtml

Is it possible to center without specifying a fixed width?

Check out this demo link Is there a way to center all the divs and paragraphs under the main div without specifying a fixed width value? I want to remove the 300px width in the .center class and have all the elements align center. Specifically, how can I ...

css

What is the process for refreshing HTML elements that have been generated using information from a CSV document?

My elements are dynamically generated from a live CSV file that updates every 1 minute. I'm aiming to manage these elements in the following way: Remove items no longer present in the CSV file Add new items that have appeared in the CSV file Maintai ...

javascripthtmlcsvd3.js

What are the specifications for the opacity, width, and height of the background image in Bootstrap's

My current project has specific requirements that I need assistance with: I need the background image of the jumbotron to fit the width of the page and have its height scaled proportionally. The opacity of the jumbotron's background image should be ...

htmlcsstwitter-bootstrap

The presence of inline display causes gaps of white space

Located at the bottom of this webpage is a media gallery. The initial three images comprise the photo gallery, followed by video thumbnails inlined afterwards. However, there seems to be an issue with the alignment of each element within the video gallery. ...

htmlalignmentcss

ShadCn UI ResizablePanelGroup effortlessly grows within the available area without the need to set a specific height

I'm facing a CSS challenge with the ResizablePanelGroup component. My layout includes a header and a ResizablePanelGroup with 4 panels. The page should take up 100% of the viewport height, and I want other components to be placed within it. Once the H ...

cssnext.jstailwind-cssshadcnui