Attempting to change the primary color in Bootstrap is ineffective following a button click

I have been attempting to customize the primary color of Bootstrap 5 using SCSS. Everything works perfectly until I click a button that opens an external link.

Below is the content of my SCSS file:

$primary: #ae217aff;

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

This is how I imported the stylesheet in index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52303d3d26212620332212677c607c627f3037263363">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./html/index.css" />
    <link rel="stylesheet" href="./html/animations.css" />
    <title>title</title>
    <script defer src="../render.js"></script>
  </head>
  <body>
    <form>
      <div class="input-group">
        <input
          type="url"
          class="form-control"
          placeholder=""
          required
        />
        <div class="input-group-append">
          <button
            class="btn btn-outline-primary"
            type="button"
            id="testBtn"
          >
            Get Spreadsheet Template
          </button>
        </div>
      </div>
     </form>

    <script src="../render.js"></script>
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a1bea1a1b4a3ffbba291e0ffe0e7ffe1">[email protected]</a>/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687b7c3d9c3d9c6">[email protected]</a>/dist/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

This is the JavaScript code snippet for opening the link:

templateBtn = document.getElementById("testBtn");
templateBtn.addEventListener("click", (event) => {
  event.stopImmediatePropagation();
  window.open(
    "",
    "_blank"
  );

The index.css file was generated by running the command "sass index.scss index.css". Here are images showing the before and after effects of clicking the button:

https://i.sstatic.net/QrVBt.pnghttps://i.sstatic.net/MVFav.png

javascripthtmlcsssassbootstrap-5

Answer №1

Consider eliminating the cdn version and opting for a single scss-compiled version of bootstrap instead. This allows you to customize bootstrap by modifying variables and utilizing them in your own classes.

I personally follow this method as outlined in their documentation:

// my-bootstrap-and-styles.scss

// custom overrides
$primary : #FEBC35;

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

// Add your custom code below
.my-primary-div {
  background: $primary;
  border: 1px solid black;
}

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

Modifying the boolean variable value in aspx.vb code

Recently, I started learning asp.net and I am facing an issue with changing the value of my boolean variable when I click a button. Below is my code: Partial Class Title Dim checker As Boolean Protected Sub Enterbutton1(ByVal sender As Object, ByVal e ...

htmlasp.netvb.net

Is there a child missing? If so, add a class

I need to add the class span.toggle if the parent element of li does not have a child ul element. click here to view on codepen Snippet of HTML: <html lang="en"> <head> <meta charset="UTF-8> <title>No Title</title>& ...

javascriptjqueryhtmlcss

The callback function is triggered prior to the completion of the request.on function

A custom npm module was developed for downloading files and displaying progress bars using the request and progress libraries. https://github.com/MaxySpark/maxyspark-download However, during testing, the callback function is executing prematurely instead ...

javascriptnode.jsnpmcallbacknode-modules

Encountering a 500 Internal Server Error message while attempting to access a WebMethod through ajax

I'm encountering an issue with accessing my C# WebMethod in the code behind, resulting in a 500 internal server error. I cannot figure out why it's not working, so any assistance in identifying the problem would be highly appreciated. https://i. ...

javascriptc#ajax

CSS transitions/transforms are failing to impact the necessary elements

I'm currently grappling with advanced transitions and transforms, and encountering some challenges with a section I'm developing. I've managed to get everything working as needed, except for the fact that there is an h5 element positioned ov ...

htmlcsscss-transitionscss-transforms

Triggering a system context menu through a longpress gesture on the MobileFirst iOS app is a

After experimenting with our MobileFirst iOS app, I noticed that if you hold down on any anchor links for more than 2 or 3 seconds, iOS will bring up a built-in menu displaying the internal path of the current HTML page. I'm unsure whether this behav ...

htmlcordovaibm-mobilefirst

Displaying nested arrays correctly

My latest endeavour involves constructing a data tree in Vue, utilizing components. Let's examine the provided data snippet: "data": [ { "id": 1, "name": "foo", "children": [ { "id": 2, "name": "bar", "children": [] } ...

javascripthtmlvue.jsvuejs2

Accessing a JSON file from AWS S3 using Node.js

I was able to successfully read a JSON file stored in my S3 bucket, but I found myself having to perform various transformations that are somewhat unclear to me. When logging the data as it arrives, I am seeing an output of Buffer data s3.getObject(objPar ...

javascriptnode.jsjsonamazon-s3

What could be causing the issue with my connection.query when using mysql in node.js?

Purpose: The goal is to perform a basic query on the database. Expected Outcome: The console should display "please print something!" along with the results of the query. Actual Outcome: Sadly, nothing appears on the terminal screen. Issues: No error me ...

javascriptmysqlnode.jsnpm

Updating Angular JS views in real-time using database changes

I am currently in the process of building a social networking application using AngularJS. I have come across an issue regarding data binding. In my app, there is a timeline div where all the recent posts are displayed, along with a status updater at the t ...

javascriptajaxangularjs

jquery activating the toggle function to switch between child elements

I'm facing a challenge where I can't use .children() in this scenario, as it won't work since the elements aren't technically children. Here's the snippet of HTML that I'm working with: <p class="l1">A</p> ...

javascriptjqueryhtml

What is the best way to determine the maximum `width` in a `translateX` animation?

I'm looking to design something similar to a desktop-only carousel. Here's the code snippet I have: <div class="wrapper"> <div class="image-container"> <img alt="Siac" src="https://diey.now.sh/Icons/Clients/SIAC_LOGO.svg"> ...

htmlcssreactjsanimationcss-animations

Making the navbar color modifications to the dropdown menu

I am currently working on applying color changes to the text in my navbar for the links that have been visited, are active, and are being hovered over. I have successfully implemented this for my regular hyperlink elements. However, I am facing an issue wi ...

htmlcssnavbar

Using 'php://input' to receive JSON data in an AJAX request

I am receiving a string from file_get_contents('php://input'). I have attempted to use json_decode(), but the string is not in JSON format. Below is the AJAX request and PHP code. How can I retrieve the JSON data sent from the AJAX request and co ...

javascriptphpjqueryjsonajax

Creating a NgFor loop in Angular 8 to display a dropdown menu styled using Material

I'm currently facing an issue with incorporating a Materialize dropdown within a dynamically generated table using *ngFor. The dropdown does not display when placed inside the table, however, it works perfectly fine when placed outside. <p>User ...

cssangulardropdownmaterializeangular-materialize

exploring the realm of creating constants in AngularJS functions

controller.js angular.module('app.main') .controller('MainCtrl', function ($scope, currentUser, addAPI) { $scope.form = {}; $scope.subdomain = currentUser.domainName; $scope.add = function () { addAPI.addAdmin(loc ...

javascriptangularjsxmlhttprequestconstants

Having trouble with updating links in HTML pages?

I'm having trouble updating all the links in my HTML file. The code I have isn't working as expected. var fs = require('fs'); fs.readFile(__dirname + '/index.html', 'utf8', function(err, html){ if(!err){ html = ...

javascriptnode.js

Reveal the class to the global scope in TypeScript

ClassExample.ts: export class ClassExample{ constructor(){} } index.html: <script src="ClassExample.js"></<script> // compiled to es5 <script> var classExample = new ClassExample(); //ClassExample is not defined < ...

javascripttypescript

React app encountering issues with Bootstrap component functionality

I recently developed a React Application and incorporated a navbar from the bootstrap component. I made sure to add CDN files in the index.html file, and changed class to className as required. However, upon running the application, I encountered an erro ...

reactjsreact-nativevisual-studio-codebootstrap-5

Deconstructing arrays in the req.body object in a Node.js Express application

Received an array in the request body as follows: [ { "month" : "JUL", "year" :"2018" }, { "month" : "JAN", "year" :"2018" }, { "month" : "MAR", "year" :"2018" } ] This array consists of two parameters (month:enum and year:string). ...

javascriptnode.jsexpressswaggerhyperledger