The color is missing in the custom button of Bootstrap v5.2

Trying to incorporate a unique button class in Bootstrap with an iris-purple color.

Utilized Sass for creating the custom button:

@import "../node_modules/bootstrap/scss/bootstrap";

$mynewcolor:#5D3FD3;

.btn-purple {
  @include button-variant($mynewcolor, shade-color($mynewcolor, 7.5%), shade-color($mynewcolor, 10%), tint-color($mynewcolor,5%), tint-color($mynewcolor, 10%), shade-color($mynewcolor,30%));
}

Resulting CSS:

.btn-purple {
  --bs-btn-color: #5439be;
  --bs-btn-bg: #5D3FD3;
  --bs-btn-border-color: #563ac3;
  --bs-btn-hover-color: #261762;
  --bs-btn-hover-bg: #6f54d8;
  --bs-btn-hover-border-color: #8068dd;
  --bs-btn-focus-shadow-rgb: 86, 58, 194;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #7d65dc;
  --bs-btn-active-border-color: #674ec9;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #5D3FD3;
  --bs-btn-disabled-border-color: #563ac3;
}

Attempted using it in HTML without the expected color: https://i.sstatic.net/1gG8l.png

Checked Firefox inspector but btn-purple was not applied as a CSS class on the page. Did I miss something?

htmlcssbootstrap-5

Answer №1

It appears there could be an issue with the connection between your Sass file and HTML file. Double check to ensure the Sass file is linked before the Bootstrap CSS file.

Answer №2

Experiment with darkening and lightening effects on your button styles

$customColor:#5D3FD3;
        
.btn-purple {
    @include button-variant($customColor, darken($customColor, 7.5%), darken($customColor, 10%), lighten($customColor,5%), lighten($customColor, 10%), darken($customColor,30%));
}

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

Use a CSS rule only if the element is not nested by using the :not selector

Could use some assistance with this coding issue: .element { border: 1px solid red; display: block; } I want to exclude this rule when .element is a descendant of .no-border using the :not pseudo-selector. For example: <div class="element">I ...

htmlcss

Extracting CSS from a cell in a Datatable and applying it to other cells within the table

I am currently utilizing the datatables plugin in my project. One of the columns in my table is named "CSS" and it contains CSS code for styling the columns in that row. For example, the table structure in the database looks like this: Name Priority ...

jquerycssdatatable

The content at the center of the page is shifting to the right side when the browser is resized

I am currently working on creating a random quote generator at the following link: http://codepen.io/Kestvir/pen/peqjZZ. During the html/css aspect of the project, I have run into an issue with the content inside a transparent background. Whenever I resi ...

htmlcsstwitter-bootstrap

Having trouble loading CSS in an express view with a router

I am encountering an issue where I am unable to load my CSS into a view that is being rendered from a Router. The CSS loads perfectly fine for a view rendered from app.js at the root of the project directory. Below is my current directory structure, node_ ...

javascriptcssnode.jsexpress

What is the best way to ensure consistency in a value across various browsers using Javascript?

I am currently developing a feature on a webpage that displays the last update date of the page. The functionality I am aiming for is to select a date in the first input box, click the update button, and have the second box populate the Last Updated field ...

javascripthtmldom-events

Using Percentage-Based Margin in React-Native

I've encountered a problem in my React Native project where using a percentage value for the margin style attribute seems to shrink the height of one of my View components. However, if I switch to using an absolute value, the issue disappears and ever ...

cssreactjsreact-nativeflexboxreact-native-flexbox

How can you achieve a vertical list display for a label while preserving its inline-block properties?

I have chosen to use labels for my radio buttons because I enjoy the convenience of being able to click on the text to select the option. However, I want these labels to appear in a vertical list format. Currently, they are displaying as blocks, causing th ...

htmlcss

Positioning Elements at the Bottom with Bootstrap 5

Here are the codes you requested: <div class="d-flex"> <h1>Hello World</h1> <p class="ms-auto small">Stupid Text</p> </div> <hr class="my-0"> I am attempting to vertically ali ...

cssbootstrap-5

Modifying text on input buttons using Javascript

Including product names, text forms, and buttons on a webpage is essential for showcasing products effectively. Each product is assigned an ID such as p1, p2, etc., while the input types are identified by i1, i2, etc. When users enter information into the ...

javascripthtmleventsonclickbuttonclick

Creating Images that appear optimized on smaller screens - the art of responsive design!

Currently, I am in the process of working on this test page located at the following link: While the page appears fine on my laptop screen, it is displaying poorly on my phone's browser. The images, in particular, appear disorganized and messy. Coul ...

htmlcssresponsive-design

Is foreach the key to optimizing your queries?

At first, I created three separate queries ($rs1, $rs2, $rs3) for the IFs to check if any images are assigned to the specified product in the database. The challenge now is optimizing this process by consolidating it into a single query and using a foreac ...

phphtmlmysql

When designing a webpage using HTML and CSS, the size of HTML blocks decreases as the page is made smaller

Having an issue with the following: I hope you can help me identify my problem here and I'm not sure why it's occurring. https://i.sstatic.net/C7VzU.png I believe the problem lies in the header and nav sections I initially thought it might be rel ...

htmlcssweb-inspector

App.post is returning a set of empty curly braces as the response

I am currently working on an express.js application that retrieves data from a MySQL database and displays it on the screen. I am also trying to implement an insert functionality so that I can add data to the database via the browser. However, when I post ...

javascripthtmlmysqlnode.js

The Div overlay vanishes once the Javascript function is finished running

Initially, take a look at this fiddle: http://jsfiddle.net/ribbs2521/Q7C3m/1/ My attempt to run JS on the fiddle has been unsuccessful, but all my code is present there, so we should be fine. I was creating my own custom image viewer, and everything was ...

javascripthtmlcss

Outlook for Windows automatically sets the default font for HTML emails to Times New Roman

My email design looks great in Mac Outlook, but Windows Outlook is changing the font to Times New Roman. Below is the code for the email template. Can someone help me figure out what I'm missing? <style style="-ms-text-size-adjust: 100%;&q ...

htmlcssoutlooknewsletteroutlook-2016

I am interested in incorporating a vertical scrollbar into a gridview in ASP.NET

I've successfully bound data to a grid view in my ASP.NET application. I've implemented pagination, but instead of that, I'd like to incorporate a scroll bar to prevent lengthy paging. Below is the code for my grid view: <div class="box ...

c#htmlcssasp.net

What is the best way to display the content below a bootstrap card while utilizing relative positioning?

Currently working on a bootstrap card design featuring an image. With the card body positioned above the image using position: absolute and top. The challenge arises when adding a new div below the card; it ends up being pushed onto the image instead of s ...

htmlcssbootstrap-4

Email-box appears in a seemingly "random" location

I am currently engrossed in my informatics project, which involves building a sample dating site. However, I have encountered some difficulties in getting everything to align correctly. Everything was working fine until my email box appeared in the wrong p ...

htmlcsstextboxmarginpadding

Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...

javascriptjqueryhtmlcss

The Main page is being graced by a floating Twitter Bootstrap video

When trying to display a video next to a paragraph, I encountered an issue where the paragraph was taking up 100% of the screen and the video was floating over it, obstructing part of the text. Despite setting the row and cols, the layout wasn't behav ...

htmltwitter-bootstrapvideogridprogram-entry-point