Struggling with configuring a personalized version of Bootstrap 4 in Sass

I am currently in the process of creating a custom version of Bootstrap 4. One of the main changes I want to make is switching the default color ("primary") from Bootstrap Blue to something different.

Initially, I made the edits directly to the Bootstrap source files by adding my new color to the standard list and setting "primary" to this new color. Surprisingly, everything worked as expected - all components adopted the new color as their default, including lighter and darker shades.

However, I am aware that this might not be the most advisable method. So, I attempted another approach using the original Bootstrap source files and created a custom.scss file like this:

@import "functions"; 
@import "variables";
@import "mixins";

$newcolor: #00a89c;

$colors: (
    "newcolor": $newcolor
);

$primary: $newcolor;

$theme-colors: (
    "primary": $primary
);

@import "bootstrap";

Upon rebuilding, I noticed some discrepancies. While certain elements like btn-primary, badge-primary, and bg-primary reflected the new color, others such as btn-link reverted back to Bootstrap Blue. After examining the Bootstrap source, I discovered that btn-link is linked to $link-color which is derived from theme-color("primary"). This confusion leads me to believe that I may have overlooked the order or misunderstood the hierarchy of precedence.

If anyone can pinpoint where I went astray and guide me on achieving consistent application of my new color wherever "primary" is referenced, I would greatly appreciate it.

Answer №1

You were on the right track with your use of @import "bootstrap" at the end.

However, the mistake you made was importing functions, variables, and mixins at the beginning when @import bootstrap.scss already includes these imports.

The issue is that by placing @import "mixins" at the top of your file, it only recognizes what was imported before (the default functions and variables) and ignores any custom values you added later on.

In your custom.scss:

$newcolor: #00a89c;

$colors: (
    "newcolor": $newcolor
);

$primary: $newcolor;

$theme-colors: (
    "primary": $primary
);

@import "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

How can I detect a DOM element mutation based on a CSS selector, and if this is possible, how can it be accomplished?

Imagine there's a website with a specific HTML element. It seems that this element has the same class during the DOMContentLoaded event as it does during the load event. However, after the load event, this class (and possibly the ID and other HTML att ...

Issue with Website Rendering: Safari 4 exhibits display glitch showing temporary content before showing a blank white screen

Currently, I'm in the process of developing a specialized rails application. However, there seems to be an unusual rendering error that has been reported by Safari 4 users. It's quite peculiar because the page appears briefly but quickly disappea ...

Populating container with video element

I have divided my page into 4 quadrants using viewheight and percentage widths, which has been successful. Now, I want to insert a video in each div that can responsively fill its parent div. When I assign width: 100% to the video, it causes some alignmen ...

Progressive computation depending on the size of the window in Cascading Style Sheets

Is there a way to dynamically calculate the left percentage in CSS based on the window width? For example: if width > 700px: left: 30% if width > 800px: left: 32% Any suggestions on how to achieve this effect? ...

Github not recognizing CSS styles

Currently working on a website to showcase the games I've developed, but encountering issues with applying my CSS. The code can be found here. As a novice in HTML and CSS coding, I've tried numerous codes and tutorials without success. ...

Tips for organizing list items in a grid format using CSS and HTML

In my div block, the width is not fixed. Inside the div, there is a list block with 11 items that I want to display evenly like this: ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## I&a ...

Expanding Side Panel feature in Bootstrap 4+

Attempting to create a collapsible sidebar using Bootstrap 4+. I managed to find code for Bootstrap 3.7.3 from here, but after converting it to Bootstrap 4+, the layout doesn't appear as intended. I'm not well-versed in HTML styling and would gre ...

In order to position an inner div in the center and have it expand equally at the top and bottom according to the content size

I am currently working on a layout that involves an inner div with a text div. My goal is to center the inner text div vertically and increase the size of the text div equally from both the top and bottom based on the content size. Below is the approach ...

What is the best way to ensure a "child" div does not overflow on its own and instead utilizes the padding of its parent div for rendering?

Initially, here are my code snippets: In the HTML file: <div class="div parent"> Title <div class="div child"> <div class="overflowed"> </div> </div> </div> CSS Styling: .div { border: 1px solid #0000 ...

Increasing Gap between Tabs in Primefaces AccordionPanel: A Guide

Is there a way to increase the spacing between the tabs of a Primefaces AccordionPanel component? ...

Discrepancy in Table Alignment

I seem to be encountering an issue with the alignment of text in my table. It appears that there are differences in content among the columns, causing the misalignment. I have tried adding white-space within each table, but it doesn't solve the proble ...

ag-Grid incorporating new style elements

For my Angular application, I have a simple requirement of adding a CSS class when a row expands or collapses to highlight the row. I attempted to use gridOptions.getRowClass following the documentation at https://www.ag-grid.com/javascript-grid-row-styles ...

Toggling display of divs with jQuery using plus and minus icons

Is it possible to use two different icons as a sprite image for when the show and hide functions are active on a div element? For instance, having a + icon displayed when showing the div, and then switching to a - icon when hiding it. The current code I ...

Challenges with Internal Styling on Wordpress Sites

Okay. I've been dealing with some internal style issues on my Wordpress website. After dedicating hours to trying to change styles for various elements, I realized that the main html file contained a bunch of internal style sheets that were overridin ...

Expanding content to cover the entire width using CSS Bootstrap 5

As a newcomer to Bootstrap, I am working on customizing an existing Bootstrap example. My objective is to expand the width of the div tag (with id "inner") to fill the entire screen. I have experimented with various approaches, such as resetting the margi ...

Discovering distinct colors for this loading dots script

Looking for assistance with a 10 loading dots animation script. I'm trying to customize the color of each dot individually, but when I create separate divs for each dot and control their colors in CSS, it causes issues with the animation. If anyone ...

How to style the color of a disabled mat-checkbox using Scss

Within my component's SCSS file, I've utilized the following code snippet to define the background color for mat-checkbox when selected: /deep/.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat ...

Matching Figures to their Descriptions

I am currently working on a website and looking to include images with captions that display the price of each item underneath. The issue I'm facing is that the captions are aligning horizontally instead of vertically. Can anyone provide assistance wi ...

What is the best method for disabling autoscroll for a specific div id when the :target attribute

I created this accordion menu using only html and css, but the buttons are built with the :target id. Is there a way to prevent the automatic scrolling when any button is clicked without using javascript? It currently moves to the anchor #id. I've se ...

Is there a more efficient approach to applying a basic function to multiple elements within a DIV and having it activate only upon a click event using jQuery?

This solution works, but I am looking for a more professional approach in order to adhere to the principle of "don't repeat yourself." $("document").ready(function(){ $(".child").each(function(index){ $(this).click(func ...