Bootstrap 4 Dropdown Menu not displaying on website

Hello everyone,

I'm encountering an issue with Bootstrap v4-alpha6 where my dropdown-menu is not appearing as expected. I tried using a sample code from the Bootstrap documentation and it worked fine, but for some reason, my implementation does not even generate the "show" class. Does anyone have any insights on what might be causing this? Your help would be greatly appreciated.

Below is the code snippet that I added along with a JSFiddle link for reference:

.carrinho-compras {
  margin-left: 200px;
  color: #E90020;
  font-weight: 700;
  cursor: pointer;
}

.carrinho-compras .carrinho-compras-icone {
  position: relative;
  margin-right: 7px;
  width: 50px;
  height: 50px;
  border: 2px solid #E90020;
  border-radius: 50px;
  font-size: 18px;
  line-height: 50px;
  text-align: center;
}

.carrinho-compras-contador {
  position: absolute;
  bottom: -10px;
  left: 27px;
  width: 25px;
  height: 25px;
  background: #f9b414;
  border-radius: 25px;
  color: #fff;
  font-size: 14px;
  line-height: 25px;
  text-align: center;
}

.dropdown-carrinho-compras { 
  position: absolute;
  top: 130%;
  left: -150px;
  width: 300px;
  margin: 0;
  padding: 20px 40px 20px 85px;
  border-width: 5px 0 0;
  border-style: solid;
  border-color: #f9b414;
  border-radius: 0;
  color: #000;
}

.dropdown-carrinho-compras p {
  margin-bottom: 5px;
  font-size: 18px;
}

.dropdown-carrinho-compras p + p {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
}

.carrinho-compras-icone-dropdown {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  font-size: 50px;
  color: #f9b414;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="carrinho-compras">
  <div class="dropdown">
  <a href="#" data-toggle="dropdown"></a>
  <span class="fa fa-shopping-cart carrinho-compras-icone" aria-hidden="true"></span><span class="carrinho-compras-contador">0</span>Carrinho
  <div class="dropdown-menu dropdown-carrinho-compras">
    <span class="fa fa-shopping-cart carrinho-compras-icone-dropdown"></span>
    <p>Ops!</p>
    <p>Seu carrinho está vazio!</p>
  </div>
 </div>
</div>

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

Make sure to enclose the span containing the icon and text within an anchor...

https://www.example.com/go/abc123xyz

<div class="dropdown">
    <a href="#" data-toggle="dropdown">
        <span class="fa fa-shopping-bag shopping-icon" aria-hidden="true"></span><span class="cart-counter">0</span>Cart</a>
    <div class="dropdown-menu cart-dropdown">
        <span class="fa fa-shopping-bag shopping-icon-dropdown"></span>
        <p>Oops!</p>
        <p>Your cart is empty!</p>
    </div>
</div>

Answer №2

To enhance the styling, consider adding a class called "dropdown" and enclosing the span element within an anchor tag.

Check out the latest version on Fiddle: https://jsfiddle.net/tL5eoex8/11/

Answer №3

Unfortunately, the code provided as a solution is not functioning correctly in my case. I suspect that popper.js has been loaded correctly, otherwise there would have been an exception thrown by bootstrap.

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

Struggling to keep my image buttons aligned in a horizontal line at the center, but they keep stacking vertically instead

I'm struggling to keep a row of image buttons centered horizontally, regardless of the window size. However, when I manage to center the buttons, they end up stacking vertically instead of aligning in a single line. I've experimented with differ ...

htmlcss

A div element without a float property set will not automatically adjust its

Can someone help me with this issue? The left-menu div is not the same height as the main content. I've tried using overflow, but it just adds a scroll bar. I've looked at numerous posts on Stack Overflow, but I can't seem to fix this proble ...

htmlcss

What is the reason behind VueJS animations only functioning in a single direction?

I'm completely baffled by this issue. It seems that Vue3 is able to apply the move animation class correctly for a <transition-group/> when there is a list of items, but this only happens if the list is moved forward. I've created a CodePen ...

javascriptvue.jsvuejs3vuejs-transitionvuejs-transition-group

Show the helper text when a TextField is selected in Material UI

I would like the error message to only show up when a user clicks on the TextField. Here's my code: import React, { useState, useEffect } from 'react'; import { TextField, Grid, Button } from '@material-ui/core'; const ReplyToComm ...

javascriptreactjsmaterial-ui

"Silent Passageway: Connecting Node JS to ASW RDS MySQL Through a Secret

I am currently collaborating on a project with a partner. The backbone of our project is node js, and we are using an AWS RDS MySQL DB for our database. Our main challenge lies in establishing effective communication with the DB through SSH within NodeJS. ...

javascriptsqlnode.jsamazon-web-servicesexpress

The moment a connection is established, the link abruptly vanishes - NodeJS and MYSQL

Lately, I've been facing a persistent issue with my node application that suddenly started crashing every time a connection is established. This problem emerged out of nowhere after my application had been running smoothly for months. The crash occurr ...

javascriptmysqlnode.js

Matching CSS attribute values with another attribute

Can CSS be used to target elements based on the value of another attribute? For instance: <div data-attr1="abc" data-attr2="def"></div> <div data-attr1="abc" data-attr2="abc"></div> I am looking for something like this (although i ...

jqueryhtmlcss

When trying to gather multiple parameters using @Param in a NestJS controller, the retrieved values turn out

Can someone help me understand why I am struggling to retrieve parameters using the @Param() decorators in my NestJS controller? These decorators are defined in both the @Controller() decorator argument and the @Get() argument. I am relatively new to Nest ...

javascriptnode.jstypescriptexpressnestjs

Unable to show the response from an HTML servlet using Ajax and qTip2

I am having an issue where I am trying to display text (or html) received from a servlet response in a qTip2 tooltip within a jsp page. Despite verifying that the servlet is being invoked and returning text using Firebug, I encountered an error when attemp ...

javajavascriptjqueryajaxservlets

Preventing jQuery plugin from loading in Ajax response

When I receive an AJAX response from page 2, I want to load the jQuery rating plugin on page 1. Although I obtained data from a database, I am unable to load the rating plugin. Here is my script: temp1.php <script type="text/javascript" src="review-p ...

phpjavascriptjqueryajax

Tips for managing the ever-evolving language state in expressJS

I am currently working on a project utilizing nodeJs, handlebars, and the expressJs framework. I have implemented a language change functionality using the i18n-express module. This module adds a query string at the end of the URL when changing languages. ...

javascriptnode.jsexpressinternationalization

Submission error occurs if file upload is absent

When attempting to submit a form with a file, I encounter issues if the selected file for upload is changed (e.g. renamed) before submitting the form. The form fails to submit. Below is an example of my code: <form action="test.htm" method="post" encty ...

javascriptjqueryhtmlsubmitform-submit

To ensure that checkboxes are automatically checked in AngularJS 1.5, the model should be bound to the objects without using the ng-checked

Due to various conflicts and dependencies, I have opted to use AngularJS 1.5.x instead of 1.6.x, which has led me to encounter some issues with ng-checked functionality. Within my ng-repeat loop, I am dealing with 2 objects: vm.stateList, containing all ...

javascriptangularjscheckboxangularjs-ng-repeatangular-ngmodel

Ways to automatically include a local variable in all functions

In each of my functions, I start with this specific line: var local = {} By doing so, it allows me to organize my variables using the following structure: local.x = 1 local.y = 2 Is there a way to modify all function prototypes to automatically include ...

javascript

"Utilizing Angular's ng-repeat to house multiple select dropdown

I'm dealing with a scenario like this: <span ng-repeat="personNum in unit.PricePerson"> {{personNum}} <select ng-model="personNum" ng-options="o as o for o in unit.PricePerson track by $index"></select> & ...

javascriptangularjs

Navigate to a different page using an AJAX request

Is it possible to use ajax for redirecting to another page? Here's the code I've been working on: <script type="text/javascript"> $(document.body).on('click', '#btnPrintPrev', function() { $.ajax({ url: &apo ...

javascriptjqueryajaxlaravel

AngularJS: How to automatically scroll to the bottom of a div

I cannot seem to scroll to the last message in my chat window. var app=angular.module('myApp', ['ngMaterial'] ); app.controller('ChatCtrl', function($window, $anchorScroll){ var self = this; self.messageWindowHeight = p ...

javascriptcssangularjsscrollangular-material

JavaScript has issues with undefined array elements

Even though there is data in bindInfo, the array elements in Bind are showing as undefined. Any recommendations? let bindinfo = { clientid: 1, clientname: 'Web Client', nowutc: now_utc, bindlist: Bindings(this.props.bindDetails) ...

javascriptreactjs

Changing the structure of a webpage in real-time and inserting new elements into the document

I have a custom x-template filled with a survey element (including a text field and radio button). Upon loading the screen, the database sends a JSON object to the UI based on previously stored sections. This JSON object is then used to populate the survey ...

javascriptjqueryjson

A method for accessing a text file from a pastebin using CORS

My goal is to utilize CORS for fetching code snippets from a pastebin and then executing them in a web browser. Here is some work-in-progress code: http://www.example.com/code-snippets.html The code is syntax highlighted with options to run it, etc. I ...

javascriptcorspastebin