What are the implications of using :root along with the universal selector in CSS to overwrite Bootstrap variables?

As I work on theming my website, which utilizes Bootstrap, I am making adjustments to the Bootstrap variables. Some variables are defined against the :root element in a way that allows me to easily override them:

:root {
    --bs-body-color: red;
}

However, there are others like --bs-navbar-color that are specified against selectors. To override these without needing to specify specific selectors, I have found that applying the style universally works:

:root * {
    --bs-navbar-color: blue !important;
}

I wonder if this approach is considered poor practice. It does seem to be effective, and while it may not be recommended for typical styles, it doesn't appear to cause significant issues when working with CSS variables.

cssbootstrap-5

Answer №1

This information can be found in the official Bootstrap documentation. If you need to override a variable, simply declare it within the :root element without using the all selector or important. Make sure to apply your custom CSS overrides after including the Bootstrap framework.

For example:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f5f8f8e3e4e3e5f6e7d7a2b9a5b9a6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
:root {
   --bs-danger-rgb: 0,0,250;
}
</style>
<div class="bg-danger">It's blue</div>

Customizing Component Variables

If you need to modify a specific component variable, there is no need to select everything with * as the variable only applies to that component. It's recommended to target the specific selector where the variable is defined, like .navbar for --bs-navbar-color, rather than using !important. Refer to the Bootstrap documentation for the correct selector to use for each variable.

Assigning CSS variables at the base component level (e.g., .navbar for navbar and its sub-components) simplifies customization and enables easy updates by the Bootstrap team in future releases.

Source: getbootstrap

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accec3c3d8dfd8decddcec99829e829d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar {
   --bs-navbar-color: blue;
}
</style>
<div class="navbar">
  <div class="navbar-text">
    It's blue
  </div>
</div>

Consider exploring SASS integration for an efficient theming solution when working with 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

The CSS for SVG circles breaks in Firefox, causing the browser to strip away the radius property

Currently, I am working on creating a progress ring using SVG and CSS. It is functioning well in Chrome; however, Firefox (61.0.1 (64-bit)) is giving me trouble as it does not display the circle. I attempted to apply the method from this question but did n ...

htmlcssangularfirefoxsvg

Implement jQuery to dynamically assign an "Active" class to tab elements based on the current page being loaded

INQUIRIES I have include: How do I apply a class to an element using jQuery, or any other method, for the active tab? Ensure that the dropdown tab appearing is the one containing the active tab, not always the Company one. In essence, I want the ac ...

javascriptjqueryhtmlcss

What are some effective methods for preventing CodeMirror from appearing as a blank white box upon initialization?

In my project with Codemirror version 5.62.3 and the 'monokai' theme set to a dark background, I am facing an issue where upon reloading the page, the CodeMirror initializes as a small white box before the proper styling is applied. I have attemp ...

cssloadingstylingcodemirror

reconfigure form credentials with JavaScript

I am currently working on a form that includes a textbox and a button for submitting data using ajax. <input type="password" id="password" /> <button id="addaccount" onclick="showload();">Add</button> When the user clicks on the button, ...

javascriptjqueryhtmlcss

What causes the absence of CSS classes in production while utilizing Tailwind and next.js?

Tailwind version: v9.3.5 PostCSS Configuration: // postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, ...(process.env.NODE_ENV === 'production' ? { '@fullhuman/p ...

cssreactjsnext.jstailwind-css

upright scrolling mouse slider

In my project, I have implemented a vertical slider with mousewheel control using SwiperJS from https://swiperjs.com/. Although the slider is working perfectly fine, I am looking to fix the positions while scrolling on the page similar to the example pro ...

javascripthtmljquerycss

Collapse the accordion item when a different one is selected

Check out this code snippet that's working on jsfiddle I'm attempting to add a function to close any open accordion items when another one is clicked. I've added a class "open", but I'm having trouble removing the class when a differen ...

javascriptjquerycsstoggle

What is the most creative way you can think of to create a CSS/JS animated

Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take? Here is a similar example I found var wave = document.createElement("div"); wave.className += " wave"; docFrag.appendChil ...

javascriptjquerycssanimation

What is the best way to completely eliminate a div from a webpage

I've created a new div element using jQuery: $(document.body).append('<div id="test"></div>'); Then, I display a success message and remove the div after 10 seconds: $('test').html('SUCCESS!'); setT ...

javascripthtmljquerycssecmascript-6

Bringing the Jquery cursor into focus following the addition of an emoji

Looking to add emojis in a contenteditable div but facing an issue with the cursor placement. Here is a DEMO created on codepen.io. The demo includes a tree emoji example where clicking on the emoji adds it to the #text contenteditable div. However, after ...

javascriptjqueryhtmlcss

Modify the Color of Chosen Anchors for Site Categories WITHOUT Using JavaScript

Is there a way to change the color of section anchors in a fixed header when selected without using JavaScript? I'm looking for a CSS-only solution that will change the color of the selected anchor and revert it back to normal when another anchor is c ...

htmlcssanchorsections

What is the best way to incorporate a specific term from the class into CSS styling

I am working on a webpage that includes '<a> <i> <label>' elements with specific classes. <a class="icon-home"></a> <label class="icon-pencil"></label> <i class="icon-display"></i> I want to ...

htmlcsscss-selectors

Make individual term span the entire width of 100%

Is it feasible to expand a single word like "News" to occupy 100% width of the div element? My goal is to automatically adjust letter spacing and justify individual words. Currently, I have a menu with items such as: Home About News Etc It would be idea ...

htmlcss

Learn how to create a visually stunning CSS menu by centering a background image from the website cssmenumaker

I found a ready-made dropdown menu on . The menu is working well, but I would like to center the buttons. Is there a way to do this? Here is the CSS code: @import url(http://fonts.googleapis.com/css?family=Open+Sans:600); /* Menu CSS */#cssmenu, #cssmenu ...

cssdrop-down-menucenteringready

Struggling to make `align-items="baseline"` function properly

I'm encountering an issue with alignment in my sandbox project. Specifically, I want the bottom of texts with different font sizes to be on the same y axis but I can't seem to figure out how to make it happen. Check out this picture to see exact ...

htmlcssreactjsflexboxreact-typescript

Align the middle element in a dynamic row

There is a row consisting of three elements: left, center, and right. However, the problem lies in the fact that the center element is not aligned at the screen level, but rather at the row level. Is there a solution to align this element at the screen l ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to adjust the position of ::before elements without affecting the border placement?

I'm struggling with an element that has a CSS style ::before to display an arrow-up inside a black circle. Check out the code here The issue I'm facing is that the character \25b2 isn't centered vertically within the circle. Adjustin ...

css

"Refreshing Your Internet Experience with Netbeans Chrome: A Guide to Clear

While developing an HTML / CSS / Javascript / PHP app in Netbeans, I've noticed that making changes to the HTML requires me to 'clear browsing data' in Chrome for the updates to show. I believe it's the 'cached images and files&apo ...

htmlcss

Create text that remains hidden behind an image while ensuring the content stays fully

In my website design using HTML/CSS, I am working on achieving a specific layout goal: https://i.sstatic.net/6UUwK.png My aim is to have a div of text positioned behind an image. Although I have successfully accomplished this on a laptop screen, I am fac ...

htmlcsslayout

Encountering a CSS syntax error within CodeSandbox when attempting to input code within brackets

Why is it that I don't see syntax errors in VSCode, but always encounter them in CodeSandbox? What could be causing this discrepancy and how can I resolve it? Any advice would be greatly appreciated. Thank you in advance. Here's an example of th ...

javascriptcssvisual-studio-codesyntax-errorcodesandbox