Unable to modify the link color within a Bootstrap 4 button

I am facing an issue with trying to change the default link color in bootstrap 4 and sass. Below is the code snippet I am using to override the _variables.scss defaults:

$body-bg: #f4f4f4;
$body-color: #c0b283;
$link-color: #c0b283;
$link-hover-decoration: none;
$navbar-dark-color: #c0b283;
$navbar-dark-hover-color: #9c906a;
$navbar-padding-y: 0px;
$list-group-bg: black;
$list-group-color: #c0b283;
$theme-colors: (
        "dark": #000,
        "danger": #ff4136
);

Here is an example of the button I am trying to target:

<div class="col-sm-12 col-md-4 mt-4">
        <form action="">
        <div class="form-group">
            <input type="text" placeholder="Search" class="mainSearchBox">
            <a href="#" class="btn btn-dark">Submit</a>
        </div>
        </form>
    </div>

I have noticed that the issue persists even when using the following code:

<div class="col-sm-12 col-md-4 mt-4">
        <form action="">
        <div class="form-group">
            <input type="text" placeholder="Search" class="mainSearchBox">
            <button type="submit" class="btn btn-dark">Submit</button>
        </div>
        </form>
    </div>

No matter what changes I make, the link color remains white.

Answer №1

Here's a suggestion:

.btn {
    background-color: $link-color !important;
    border-color: $link-color !important;
}

You may also want to verify your primary SASS/SCSS file. Ensure that bootstrap is declared above the file in which you are customizing your projects.

Answer №2

Check out this solution:

$link-color: #c0b283 !important;

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

Customizing Thickness for Tab Labels in MUI 5

I have been trying to adjust the thickness of the label inside a tab using MUI 5, but so far I haven't had success. Here is what I have attempted: interface TabPanelProps { children?: React.ReactNode; index: number; value: number; } funct ...

When the jquery.show() function is invoked, scrollbars are displayed on the screen

I am encountering an issue with a flydown menu that includes a scrollable div. The div is about 400 pixels in height, causing scrollbars to appear in the drop down menu. When I hover over it, I trigger the show method as follows: $("#flydown").show(); Al ...

Differences in window height between Firefox and Chrome

When positioning a modal vertically, how can I ensure consistent alignment across different browsers? method.center = function () { var top, left; top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2; left = Math.max($(window).widt ...

How to apply color to text in Node.js

I am in the process of creating a web-based compiler using NodeJS. My main objective is to highlight syntax in different colors. For example, consider the following C code: int var; printf("%d",var); In this code snippet, I would like the "int" and "prin ...

Having difficulty aligning the email input field in the center

Currently, I am in the process of building a product landing page as a part of the freecodecamp bootcamp, and I have incorporated the bootstrap library into my project. One issue I encountered is with centering the email input field within the form. I att ...

Guide on adjusting padding for jQuery Flot graph for improved styling

I am utilizing jQuery Flot to generate a basic graph. I do not want the axes to display on either side, but this is causing the points to be slightly cut off. Any suggestions on how to resolve this issue? $.plot('#'+id, [ { data: data.values ...

Ionic: Fixed button located at the bottom of a specific ion-slide

I've been creating a series of slides with questions, and the final slide serves as a summary of the previously answered questions. I want to ensure that the submit button is always visible at the bottom of this last slide. However, I've encounte ...

How can you retrieve information from your ThingSpeak channel by utilizing a toggle button in jQuery?

I have implemented a code that successfully switches on and off. Now I am looking to incorporate reading data from my thingspeak channel based on the values 1 and 0, using the read channel URL. However, I am facing challenges in writing this functionalit ...

Steps to insert a large image into a div while maintaining the size ratio

https://i.sstatic.net/WvBbF.png I'm struggling to add a logo to the right corner of this div The logo size is too big and it doesn't adjust properly to the existing div height and width Below is the code I've tried, but the image is ruini ...

What issue could be causing trouble with my JavaScript animation?

Currently, I am working on designing a web-page and I have a specific vision in mind - I want an image of the moon to slowly rise up from the bottom of the screen to the top. Here's the HTML code that I have so far: <body> <div id="Moon" ...

Preventing an object from exceeding the boundaries of its designated space

My DIV is filled with user-generated content, which sometimes begins with an item that has a margin-top that overflows the container, creating a gap between it and preceding elements. I've discovered that changing the display property to either inline ...

Tips for inserting an image within two divs within the .row class (leveraging Bootstrap 4)

Take a look at my code snippet: <div class="row"style=""> <div class="panel panel-success col-sm-3" style="background-color: #d16b55; "> <div class="panel-body" style="height: 1000px; margin-left: 50px;overflow: hidden !important;"> ...

The TypeScript declarations for the scss module are malfunctioning

Just recently, I set up a React project using rollup. Below is the configuration file for my rollup setup: rollup.config.js import serve from "rollup-plugin-serve"; import livereload from "rollup-plugin-livereload"; import babel from &q ...

Alignment issues with images

I am trying to put together a collection of images that function as links and light up when hovered over. However, my attempt to add a <div class="hover"> in front of each image caused them to no longer display in a horizontal line. How can I resolve ...

Apply a class to a div element when the WooCommerce cart is devoid of any items

Is there a way to apply a class or style to an element that displays the cart count only when the cart is empty? Currently, I have the following code in my header.php file which shows the cart count correctly, but does not update the color: header.php ( ...

Bootstrap 5 alert: The function `$(...).carousel` is not recognized

Despite browsing through numerous similar questions, none of the solutions seem to work for my issue. Listed below are some points I have checked: Jquery is loaded before bootstrap Bootstrap libraries are up to date Confirmation that bootstrap.min. ...

Enhancing Bootstrap Slider Range with jQuery/Javascript

Currently, I have incorporated the Bootstrap slider into a webpage that features two sliders on a single page. The range of the second slider depends on the value of the first one. It is crucial for me to be able to update the range of the second slider af ...

Navigate through the list of options by scrolling and selecting each one until the desired element is

Hey, I've got this AngularJs directive that selects an item based on the "key-pressed" event, and it's working perfectly. The issue arises when there is a scroll bar since the elements get hidden, making it difficult for me to see them. You can ...

A creative way to display a div upon hovering over a link dynamically

My website has dynamically generated a tags, each with its own corresponding div containing unique content and height. I want to make it so that when a user hovers over an a tag, the matching div is displayed. The div should appear at the position of the m ...

JavaScript double-click functionality is not operational on IE9 and IE11 browsers

My JavaScript code has an issue where single-click opens a link in a new tab and double-click opens a lightbox. This works perfectly in all browsers except for IE9 and IE11. In my initial code, both single-click and double-click function correctly. However ...