Can someone point me to where in Bootstrap 4 the background changes when a menu is clicked? (Please see the example provided)

Hi, I'm currently diving into the world of web development and have encountered an issue with my dropdown menu turning blue upon clicking it. Despite inspecting the code in Google Inspector, I cannot seem to locate where this styling is being set. Can someone knowledgeable please lend a hand?

!DOCTYPE html>
<html dir="ltr" lang="en" prefix="content: http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema# schema: http://schema.org/ sioc: http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema#">
<head>
  <meta charset="utf-8">
  <meta content="Drupal 8 (https://www.drupal.org)" name="Generator">
  <meta content="width" name="MobileOptimized">
  <meta content="true" name="HandheldFriendly">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="ie=edge" http-equiv="x-ua-compatible">
  

  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  


<p class="dropdown-item">
  click me, I turn blue, why? :/
</p>


</head>

  



   
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
  </script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
  </script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
  </script>

</html>

htmlcssbootstrap-4drupal-8

Answer №1

After discovering that I could monitor events (specifically mouse clicks), it became simple to locate where this style was being applied:

.dropdown-item.active, .dropdown-item:active {
   color: #fff;
   text-decoration: none;
   background-color: #007bff;
}

located in _dropdown.scss

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

Transform HTML table into plain text

I need assistance with a project involving the conversion of HTML email into text format. Below is a simplified version of the HTML code I am working with: <table> <tr> <td width="10%"></td> <td width="60%"&g ...

phphtmltexthtml-table

An easy guide on implementing the if control statement within a Jinja2 embedded HTML document

Utilizing parsehub, I have successfully scraped a list of movie names and exported it to an html file using a python script. However, my intention is to only display titles that contain the word "The" by implementing an if statement. The code structure app ...

pythonhtmldjangoparsehub

Using jQuery to append content does not automatically attach an AJAX event listener to the newly appended element

Here is a script I have for appending new elements: function(addNewElements, information, link){ var $newAdditions = $( addNewElements ); $('#posts').masonry( 'appended', $newAdditions, true); } This button is included in th ...

javascriptjqueryhtmlajaxangularjs

Fixing content at the bottom inside a container with Bootstrap 4

My app is contained within a <div class="container">. Inside this container, I have an editor and some buttons that I always want to be displayed at the bottom of the screen. Here's how it looks: <div class="container> // content here.. ...

htmlcssbootstrap-4

Unknown CSS element discovered: bootstrap, gradient, carousel

I recently created a random quote app using javascript, jQuery, and bootstrap on Codepen. Everything worked perfectly there. However, when I organized the files, pushed them to git, and tried to view the app from Safari, I encountered some warnings and t ...

javascriptjquerycsstwitter-bootstrap

Transferring Text from Word to Expression using Copy and Paste

Whenever I try to copy and paste content from a Word document into Expressions Web, I encounter some strange behavior. Often, the top line gets placed in one <span> tag while the rest ends up in another <span> tag, causing a slight gap between ...

htmlcssmicrosoft-expression-web

What is the best way to create a mobile menu transition that moves in a "reverse" direction?

I have been working on animating a mobile menu where the three stripes transform into an 'X' when clicked and revert back to three stripes when closed. The transition to an 'X' is working perfectly, but when closing the menu, it jumps b ...

jquerycssanimation

What could be causing this :after element to be influenced by line breaks?

Recently, I have developed a straightforward menu structure as shown below: <ul id="main-menu" class="container"> <li><a href="#">About Us</a></li> <li><a href="#">Home</a></li> <li>& ...

csswebkitpseudo-element

CSS layout: The full-width header should align its left margin with the centered content-div

Can someone help me out with a solution to my problem? My page has a 1040px centered div for content, menu, and footer. I want the header image to align with the left margin of the content div and expand towards the right side for higher screen resolutio ...

cssweb-applicationshtmlpositioning

Obtaining PHP Cookie

I'm currently working on implementing a cookie stored using PHP to check if a user is logged in. Here is how I am setting the cookie: else $keep_alive = time()+(86400 * 14); setcookie("id",mysql_result($result, 0, "id"),$keep_alive, "/", "mydomain.c ...

phphtml

What could be causing the inability of select:-moz-focusring to eliminate the dotted lines in the Firefox browser on this bootstrap navigation

Is there a way to remove the Firefox dotted lines from my bootstrap navigation bar? I've come across suggestions to add the following code snippet to the CSS file: a:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; ...

cssangularjstwitter-bootstrapfirefox

Creating a Blob in JavaScript to Save an Image File (Using the HTML5 File API)

Currently, I am working on a project involving a Chrome extension that involves copying user-selected files into the extension's filesystem. Everything seems to be functioning without any errors, but when attempting to view the image, it appears broke ...

javascripthtmlfilefile-uploadblob

What is the issue with this code and why am I not receiving any error messages?

I am new to JavaScript and decided to do some practice. I wanted to create a webpage that allows users to select the number of products they want to buy, using plus and minus buttons. The program was supposed to increment or decrement the input value based ...

javascripthtmlcssweb

The Info button in Bootstrap5 is sporting a sleek combination of blue background and black text, deviating from the traditional blue and

Check out my full code for the Random Quote Generator Project on Codepen: here I implemented Bootstrap5 from this link: Bootstrap CDN. The button style btn-info is not displaying correctly in my project. I'm puzzled and would like to understand why ...

cssbuttonsassfrontendbootstrap-5

Is there a way to showcase the outcome of a Python script on an HTML webpage?

Hey there, I'm a beginner to coding and I've been working on a little project to track the price of gold in a web application using Flask and Python. In my HTML code, I have a button that, when clicked, takes users to a new route where the gold ...

pythoncssflask

The content inside the inner div does not stretch to match the height of its parent element

I want to address a specific issue I am facing with my div structure. Although it may seem similar to other questions on StackOverflow, none of the existing solutions have worked for me. The problem is that I have two child divs inside a parent div. The h ...

htmlcss

When I utilize position absolute, the elements start overlapping each other

I am currently working on displaying sidebar content within tabs, and I need to adjust the height dynamically based on the content. However, I encountered an issue where the elements above and below the tabs are overlapping. To address this problem, I remo ...

csstabs

XPath complexity - Create an XPath expression based on the location of a different element

Within a table div, there are two child divs. The first child div represents the table header, and the second child contains the values corresponding to those headers. The parent div is in bold, and the children are in italic bold. <div class="sc- ...

htmlcssseleniumxpath

Directories within directories - HTML base directories & subdirectories

Within my HTML, I have included the following code: <head> <base href="http://mydomain.com/dev/"> </head> Despite this base element setting, all of my links seem to be pointing to mydomain.com/ instead of the expected subfolder /dev/. ...

htmlhyperlink

Using CSS Clip Path to conceal elements

My current design uses clip-path for a gradient effect at the top of the page. Ideally, I want the two angles to meet seamlessly without any visual issues. I initially positioned the top so that they touch perfectly and nothing interferes with the angled ...

css