The selected custom button color is not appearing as intended when viewed in the

I'm currently in the process of creating a small webpage dedicated to showcasing my top favorite Zelda bosses using HTML, CSS, and Bootstrap 5. To make it more personalized, I decided to veer away from the standard Bootstrap button colors and create my own custom color scheme. However, I've encountered an issue where the custom color does not display on the webpage, although it shows up properly on Codepen. Below, you will find the snippets of HTML and CSS code that I have written thus far. Can anyone spot what might be causing this discrepancy?

.header-custom {
  background-color: #bea925;
}

.header-heading-text {
  font-weight: bold;
}

.main-container-color {
  background-color: #2596be;
}


/* Modal Stuff */

.mod-button {
  background-color: #6c25be;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Zelda Mini-wiki</title>
  <meta name="description" content="This mini guide will cover all of the important facts and aspects of The Legend of Zelda franchise. Not as big as the full wiki, but still powerful enough to get the job done.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93f1fcceefe9eae3ed">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <div class="p-5 header-custom text-white text-center">
    <h1 class="header-heading-text"> Top 10 Zelda Bosses (In my opinion)</h1>
    <p>Please don't come after me!</p>
  </div>

  <!--Main container-->
  <div class="p-5 container-fluid main-container-color">
    <div class="row text-center">
      <div class="col-lg-4 col-md-6">
        <div class="card" style="width:400px">
          <img class="card-img-top" src="images/koloktos_image.webp" alt="" style="width:100%">
          <div class="card-body">
            <h4 class="card-title">Koloktos</h4>
            <button type="button" class="btn mod-button" data-bs-toggle="modal" data-bs-target="myModal">
                        More Info
                    </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Must stay at the end of the body tag -->
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adcfc2d3dcd7deeccfdbdcbcfdcabaabeddacbfefaafdbcbdba0">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

htmlcssbootstrap-5

Answer №1

To enhance the significance of your class, it is essential to create a more specific class in CSS with prioritized specificity. For example:

.card-title .mod-button {
     background-color: #6c25be;
}

This approach can help you override Bootstrap to some extent.

The reason this method works is because each selector has its own numerical 'weight':

100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: Inline styling automatically wins with 1000 points.

In scenarios where two selector styles conflict, the browser always selects the one with higher weight. The order of your stylesheets only becomes relevant when priorities are equal - making it challenging to override Bootstrap.

By adding more classes to the string in your CSS, you gain an additional 10 points for each class used.

Exercise caution when using IDs, as they are intended for a single object on the page.

Answer №2

To ensure the custom style takes precedence over Bootstrap, remember to mark it as important.

/* Custom Modal Style */
.mod-button {
  background-color: #6c25be !important;
}

Here is a live example: https://jsfiddle.net/xvbctL54/

Answer №3

Swap out mod-button with :

.btn-custom {
    color:white;
    background-color: #6c25be;
    border-color: #6c25be;
}
    
.btn-custom:hover {
    color:#6c25be;
    background-color: white;
}

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

What could be the reason for createPopper not being recognized as a function, despite Popper being included in the code?

I am facing an issue with dropdown menus in my website. I have one dropdown in the navbar and another outside of it. The navbar dropdown is functioning properly, but when I try to open the other dropdown by clicking on its designated icon, nothing happens. ...

ruby-on-railsbootstrap-5popper.js

Menu Items at the Center

I am currently working on a Wordpress website and struggling to center the menu items that are currently aligned to the left. I have created a child theme from the existing theme's code, but still can't figure out how to achieve this simple task. ...

csswordpressmenuhtml-listsnav

Tips for getting rid of the glowing effect on MUI slider thumbs when they are in focus

import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...

htmlcssreactjsmaterial-ui

Is there a way to ensure certain items are displayed on different lines?

Currently, I am working on styling an HTML list with the following properties: font-weight: bold; padding: 0px; margin: 0px; list-style-type: none; display: block; width:700px; font-size: 14px; white-space: pre-wrap; The individual cells within this list ...

htmlcsshtml-lists

PHP 5's HTML Form Library

Currently in search of an alternative to QuickForm. I have encountered performance problems with QF, specifically when dealing with a large number of options in combobox. I prefer something that is more object-oriented like Zend_Form, but without the exc ...

phphtmlforms

The cursor image fails to function when entering a specific area within the image

I have implemented a custom cursor using the code snippet below. $("div").css('cursor','url(../graphics/system/mybg.cur),auto'); However, I am experiencing an issue where the cursor reverts to the default pointer when hovering over a ...

jqueryhtmlcsscursor

Ways to apply a box shadow exclusively to specific elements

Is there a way to apply a box-shadow to a div without it affecting specific other divs? In simpler terms, is it possible to prevent shadows from being cast on a particular div? Take for example this scenario: http://jsfiddle.net/Cd6fE/ How can I prevent ...

jquerycss

How does [name] compare to [attr.name]?

Question regarding the [attr.name] and [name], I am utilizing querySelectorAll in my Typescript as shown below: this._document.querySelectorAll("input[name='checkModel-']") However, when I define it in the HTML like this: <input [name]="check ...

htmlangulartypescript

What is the best way to handle an array (or manually loop through ng-repeat)?

AngularJS Version: 1.3.15 Confession: While I have limited knowledge of AngularJS, I am required to utilize it due to its integration in the framework I am working with. I aim to make changes to some HTML/AngularJS code that currently appears as follows: ...

angularjshtml

Passing information from the created hook to the mounted hook in VueJS

How can I transfer data from the created function to the mounted function in VueJS? In my VueJS application, the code in my created function is as follows: created: function(){ $.getJSON({ url: 'static/timeline.json', success:function( ...

javascripthtmljsonvue.jsvuejs2

Using a HTML value as an argument in a React component

Can someone help me figure out how to pass an HTML value as a parameter for my function? Here is the code snippet I have: <input type ="text" placeholder="Smart Contract Bytecode" name="name" id ="scbytecode" className="nice-textbox"/> <button i ...

htmlreactjsparameters

The CSS overflow property is a great tool to demonstrate how a box can be neatly cut off at its

According to the specifications outlined in this resource, In situations where overflow occurs, the 'overflow' property determines if a box is clipped to its padding edge. Additionally, it specifies whether or not a scrolling mechanism will b ...

htmlcss

Express will be used to return empty values to an array

I am currently in the process of learning how to use express, so I am relatively new to it. I am facing an issue where I am trying to send data from a form I created to an array, but unfortunately, it is adding empty values to the array. The values are dis ...

htmlnode.jsexpressejs

Embed the WordPress header file outside of the WordPress platform

Recently diving into the world of WordPress, I am eager to integrate the WordPress header file into my PHP file in order to display the identical header as seen on the WordPress site. I am exploring potential methods to achieve this as I work on creating ...

phphtmlcss

Struggling to resolve problem with MoveTargetOutOfBoundsException or encountering difficulty scrolling into view in Firefox

Despite trying numerous options, I've hit a roadblock in Firefox where my code can't seem to locate an element that is clearly visible on the screen. Below is a snippet of my code including variable declarations: ''' *** Variables ...

htmlpython-3.xseleniumpycharmrobotframework

Deleting items with a swipe gesture in Angular 10

Hey there, fellow developer! I could really use some assistance in implementing the swipe delete feature for our Angular project. Could you take a look at the screenshot provided below? https://i.sstatic.net/LqXlm.jpg The code snippet given to me for thi ...

htmlangularangular-materialscss-lint

having numerous collapsible elements that trigger a single django view function, each one submitting a distinct value

I have multiple collapsible items that need to trigger the same Django function when submitted with different values. https://i.sstatic.net/1BO19.png Is there a way to achieve this without using a dropdown menu in Django forms? What modifications should ...

pythonhtmldjango

Modifications to contenteditable elements result in a change to their IDs

Having some trouble with the behavior of a contenteditable div. The code structure is like this: <div contenteditable="true"> <p id="element-id-1">element-id-1</p> <p id="element-id-2">element-id-2</p> </div> E ...

javascriptjqueryhtmlcssdom

Vuejs responsive navbar with collapsible sidebar using Bootstrap or Bootstrap-Vue libraries

Vue.js is the framework I'm utilizing for my current project. In creating a dashboard section, I am seeking to implement a responsive design using either bootstrap, bootstrap-vue, or plain HTML and CSS. Below are the images of the desired dashboard -& ...

htmlvue.jsnavbarsidebarbootstrap-vue

Incorporating Stripe: Enhancing Online Payments through Redirected Checkout

I am currently in the process of upgrading our checkout system to be SCA compliant. According to the documentation, I must utilize PaymentIntents for this purpose. I have followed the steps outlined in their document found at: https://stripe.com/docs/payme ...

javascriptjavahtmlstripe-payments