Tips for effectively handling color inheritance within Bootstrap 5

I need to customize Bootstrap 5 .text-success color for better contrast on my custom .bg-lvlN classes. Here is how I have defined them:

.bg-lvl1 {
  background-color: #303333;
}

.bg-lvl2 {
  background-color: #222424;
}

/* Overriding .text-success color */
.bg-lvl1 .text-success {
  color: #00d750 !important;
}

.bg-lvl2 .text-success {
  color: #00c74a !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0d00001b1c1b1b1e0e171b06146344514e5347584f44">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-lvl2">
  <!-- The text inside this span should have color #00c74a -->
  <span class="text-success">Green</span>
  <div class="bg-lvl1">
    <!-- The text inside this span should have color #00d750, but currently it's #00c74a -->
    <span class="text-success" id="nested">Green</span>
  </div>
</div>

Unfortunately, the .bg-lvl2 .text-success rule takes precedence over .bg-lvl1 .text-success rule for the #nested span.

How can I make the .bg-lvl1 .text-success style apply to #nested span? Or is there a different approach to achieve the desired text color?

csssassbootstrap-5

Answer №1

I successfully resolved the priority issue by redefining the CSS variables for Bootstrap 5 --bs-[color]-rgb in my custom background classes:

@import 'bootstrap/scss/functions';

.bg-lvl1 {
  --bs-success-rgb: to-rgb(#00d750);
}

.bg-lvl2 {
  --bs-success-rgb: to-rgb(#00c74a);
}

This ensures that the Bootstrap 5 .text-success rule is applied as intended without being overridden:

.text-success {
  --bs-text-opacity:  1;
  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}


.bg-lvl1 {
  background-color: #303333;
  --bs-success-rgb:  0, 170, 12;
}

.bg-lvl2 {
  background-color: #222424;
  --bs-success-rgb:  0, 158, 11;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9b28ae828 home >bootstra
<div class="bg-lvl2">
  <!-- This span has #00c74a color as expected -->
  <span class="text-success">Green</span>
  <div class="bg-lvl1">
    <!-- This span has #00d750 color as expected -->
    <span class="text-success" id="nested">Green</span>
  </div>
</div>

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

CDK virtual scroll problem occurs when scrolling down, items are displayed slowly and occasionally blank for a few seconds

In my project, I am utilizing Angular's virtual scroll feature. However, whenever I scroll down, the items load but flicker momentarily. I have attempted to use maxBufferPx and minBufferPx as well as adjusting positions to resolve this issue, but so ...

cssangular-materialangular7virtualscrollangular-cdk-virtual-scroll

Enhancing Image Upload with Ajax/JavaScript: Generating Multiple Previews

I've been experimenting with an Ajax image uploader that I found on this website. Currently, I have managed to create duplicate preview images: one displayed under the input field and the other elsewhere on the page labeled as "this what you chose". H ...

javascriptjqueryhtmlcssajax

Combining 2 divs harmoniously

I have a set of HTML div elements that are styled using the following CSS: div{ width:250px; height:250px; display:inline-block; border-radius: 10px; margin:10px; background:#2E2922; vertical-align:top; } In my HTML, these div ...

htmlcss

What is the best way to create CSS rules that can be dynamically applied as classes using JavaScript?

I have been attempting to use the addClass function in JavaScript to add a class, but I am struggling to make it work. Is there a specific way to define a class that will be added to an element when clicked on? Here is what I have attempted: var input = ...

javascriptjqueryhtmlcss

What is the best way to choose CSS class attributes using Mootools and the getStyle()

Seeking to duplicate an object, I am trying to figure out how to retrieve class CSS attributes from Mootools. css: .card { width: 109px; height: 145px; } html: <div id="cards"> <div class="card" id="c0"> <div class="face fron ...

javascriptcssmootools

When the screen becomes responsive, elements escape from the div

I'm encountering an issue with the code block below. When attempting to make the screen responsive, the elements within the aircard div are not stacking as expected. Instead, they seem to overflow. I'm unsure of the reason for this behavior and h ...

htmlcssbootstrap-4responsiveresponsiveness

What is the best way to show a table with 100% width in the Chrome browser?

I am currently working on debugging and expanding an express application that showcases a dataset through a series of nested tables on a webpage. Initially, all the CSS resided within style tags in the head section of the HTML file, and the tables were dis ...

javascripthtmlcsstwitter-bootstrapexpress

The image referenced in the assets folder could not be located within the SCSS

Although I've come across similar questions, none of the solutions provided seem to work for me. I've tried them all, but they just don't seem to do the trick. My goal is quite simple - I just want to set a background image using CSS. Howev ...

cssangular

What is the best way to ensure that a div appears below, rather than alongside, another one

I need help positioning my divs on the webpage. Currently, my map div is appearing next to the list instead of below it. The height of the list can vary as it is generated dynamically. I want the map div to be on the right side with the list displayed on t ...

htmlcss

Incorporating additional options onto the menu

I recently designed a menu on https://codepen.io/ettrics/pen/ZYqKGb with 5 unique menu titles. However, I now have the need to add a sixth title to the menu. After attempting to do so by adding "strip6" in my CSS, the menu ended up malfunctioning and looki ...

javascripthtmlcss

Maintaining the original layout upon refreshing the page

Incorporating two forms on my website, I added a button that transitions between the login and sign-up forms smoothly. The process is as follows: Initially, the login form is displayed; clicking the button switches to the sign-up form. Proceeding to subm ...

javascriptjqueryhtmlcss

The div inside an iframe is not displaying the desired background color as intended from the parent page

The code snippet below is included in the <head> section of the main page: <script type="text/javascript"> $(document).ready(function () { $('#innerframe').load(function () { $(this).contents().find($(".TitleB ...

javascriptjqueryhtmlcssiframe

CSS Problems in IE9 Causing Alignment Issues with Two Items in List Item

Take a look at this: JSFiddle The code looks fine in firefox, chrome, and opera, but in ie9, the numbers are shifting. Please see the image for reference. Everything is correct on the left, but on the right is ie9. I'm stuck and need help to solve ...

htmlcssinternet-explorerlist

Combine several CSS classes into a single class for easier styling

I have implemented specific styling on my webpage based on the city or state of the user. For instance, if someone is from New Jersey, the background color will be red. Currently, I am achieving this using the following method: Using a combination of HTML ...

phphtmlcss

What is the best way to switch back and forth between two div elements?

I've been attempting to switch between displaying div .cam1 and div .cam2, however, I can't seem to get it to work. Here's the code snippet in question: HTML: <div class="cam1"></div> <div class="cam2"></div> CS ...

javascriptjqueryhtmlcss

Prevent the onclick function of a span element from being triggered when the user clicks on a dropdown menu contained within

Just delving into the world of web development and currently tackling a React project. Encountered an issue where I need to make a span element clickable. However, there's a dropdown within that span that doesn't have any onClick event attached t ...

javascripthtmlcssreactjstypescript

Collaborating with interactive icon in input group

I'm having trouble getting the textbox and icon to be in the same line, like a bootstrap input group. The icon is also clickable. <div class="input-group"> <asp:textbox id="txtParentCategoryCode" runat="server" cssclass="input-text normal" m ...

cssasp.netfont-awesome

Having trouble inserting a new row into the AngularJS table?

Having trouble adding a new row to the table in angularjs when clicking the add button. Here is the link to the Plunkr example -https://plnkr.co/edit/s7XAaG4JbvbTTxiZ0V2z?p=preview The HTML code snippet is as follows: <html> <head> <script ...

htmlcssangularjs

The CSS provider for Gtk+3 is malfunctioning

I've been attempting to set an image as the background of a GtkBox using a CSS provider, and also customize the style of some label text, but no matter what I try, nothing seems to work. Below is the content of my custom.css file: GtkBox#Home_Princi ...

csscgtk3

The image link leading to the homepage lacks the functionality to be clicked on

My website has a logo on the top left that links to the home page, but only some areas of the image are clickable. It seems like the clickable and non-clickable areas are scattered randomly. How can I ensure that the link works across the entire area of ...

htmlcss