CSS file from outside does not impact the appearance of buttons

Take for instance this button:

<input class="btn btn-primary btn-block btn-lg register_btn rounded-0 submit-button" type="submit" value="Submit">

and the CSS code within a custom custom.css file:

.submit-button {    
    background-color:yellow!important;
    border-color:yellow!important;
}

Unfortunately, the button's color does not change as intended. However, applying an inline style to the button works correctly.

This is how I link the Bootstrap and custom.css files:

<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/custom.css">
cssbootstrap-4

Answer №1

There is a space missing in yellow!important. between yellow and !important. Make sure to add a space after yellow or use the code below by replacing your old code with it and give it a try:)

.submit-button {    
    background-color: yellow !important;
    border-color: yellow !important;
}

Note: Ensure that your custom.css file is in the css folder and linked correctly. Check the Developer window in your Browser (Ctrl+SHift+I) to see which CSS properties are being applied to the button.

UPDATE:

As this is a spacing issue, you can now avoid using !important as it is not considered a good practice. Also, make sure no inline style is being used :)

.submit-button {    
    background-color: yellow;
    border-color: yellow;
}

Answer №2

It appears that you have successfully inputted the accurate code and class designation. The only possibility is that the file custom.css was not properly called within your head tag. This means that the source for implementing changes may not be located at all. To rectify this issue, you can utilize 

<link rel="stylesheet" href="direction/custom.css">
within the <head> section of your document.

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

In JavaScript, the gallery feature with Lightbox effect creates a unique touch as only half of the screen fades to black in

Hello everyone, I'm a complete beginner when it comes to programming so please be gentle with me on my first question :) I'm trying to put together a simple website with a lightbox gallery, and you can check out what I have so far here. The prob ...

javascriptjqueryhtmlcss

Padding located within a div tag

As a novice in the world of HTML and CSS, I have designed a birthday card with a desired 50/50 split down the center. Placing an image on the left side was successful, however when trying to add text to the right, it ended up too close to the center line. ...

htmlcss

Hovering over a dropdown menu results in the color not completely filling the background of the desired element

.nav-main { background-color:#09F; width:100%; height:100px; color:#FFF; line-height:40px; } .nav-main .logo{ float:left; padding: 40px 5px; font-size:1.4em; line-height: 20px; } .nav-main > ul { margin:0; ...

csshoverbackground-color

Adjusting Size Dynamically for Tooltips Based on Content Length

In my angular app using ng-bootstrap v4.2.1 on an older codebase, I have successfully created a tooltip with some very long sentences as content. I am trying to make the tooltip 800px wide, but when I set the width, only the first few words fill the space. ...

htmlcssangularng-bootstrap

The background image of my bootstrap carousel is not responsive to changes in the browser window size

Hey there, I'm new to the world of programming and currently working on a project to create the front end of my personal website. I've opted to utilize a bootstrap carousel background image slider in my index.html file. However, I've noticed ...

javascriptjqueryhtmlcssbootstrap-4

Issues with spacing in navigation bar

I've been searching and experimenting for hours, but I can't seem to make it work. In my "inline-form," I have a button on the left, an input field in the middle, and a button on the right within a navbar. Everything displays correctly when the ...

htmlcssbootstrap-4

Is there a Polar transformation available in CSS3?

Converting a line into a ring is a straightforward process in graphic design software like GIMP: https://i.sstatic.net/7lQZe.png (source: adamhaskell.net) I'm exploring the possibility of achieving the same effect using CSS. Here's what I&ap ...

csscss-transforms

Creating CSS boxes in a dual column layout with a step-by-step approach

Currently, I am in the process of developing a user interface for a menu that looks something like this: https://i.sstatic.net/GuzRm.png I am exploring different implementation methods for this design. In this project, I am utilizing Bootstrap framework. ...

angularjscsstwitter-bootstrap-3sass

Tips for resizing the background to match the font size on a canvas marker in Google Maps

Check out my jsFiddle code below: var marker = new google.maps.Marker({ position: new google.maps.LatLng(-25.363882,131.044922), map: map, title:"Hello World!", icon: CanvasCrear("hola", 15) ...

javascriptcsshtmlgoogle-mapscanvas

How can I modify the text color of the Navbar-Brand class in Bootstrap NavBar?

I have been experimenting with various options to change the text color of the `navbar` and specifically the `navbar-brand` item. However, my `.navbar-brand {color: purple;}` CSS class doesn't seem to be working. Can someone please assist me in determ ...

htmlcssbootstrap-4

Enhanced Vertical Space Produced on my Website in Firefox

For some reason, Firefox is adding an extra 250px at the end of my website below the footer. I have not been able to determine why this is occurring. Note: The site functions properly on all other browsers; the issue is specific to Firefox. You can view ...

htmlcssfirefox

Ensure that the height of the bootstrap image is limited by the dimensions of another column while still preserving its

I need to develop a versatile element with bootstrap that can accommodate images of different aspect ratios. To achieve this, I must trim the right side of the picture like so. <div class="container"> <div class="row"> <div class="col-12" ...

htmlcssbootstrap-4

JQuery Mobile header style vanishing when applied to a page generated dynamically

My second page retrieves data from an Ajax call on the home page, but the header lacks JQuery styling and I suspect a connection between the two. Here is the HTML for the dynamically generated page: <div data-role="page" id="breakdownDialog" data-add-b ...

cssjquery-mobilemobiledynamically-generated

How come the width property is not being applied in my media query?

This issue is new to me. I am facing difficulty modifying the width in my media query. Interestingly, in the developer tools, the width appears crossed out, as if I toggled it off, but that's not the case; it's the default setting. All I want to ...

htmlcssmedia-queries

Switch up the text when the image link is being hovered over

Is there a way to change the text color of the "a" tag when it is not wrapping the img link? <li> <a href="# WHEN I HOVER THIS IMG LINK I WANT A TAG BELOW TO CHANGE COLOR"> <img alt="Franchise 16" src="#"></img> < ...

javascriptjquerycss

The problem of box-shadow conflicting with fluid width layouts has been a persistent issue,

After spending the past couple of days refining a page I created, I've encountered an issue following the implementation of box-shadow. I'm hoping someone can provide some advice on how to easily resolve this. The Scenario: I have a div with var ...

csswidthfluid-layout

Is it common practice or a clever hack to use negative values for the top position in CSS?

I am working with a few Div's that have background images, and the top one has a curve design. I am trying to align the bottom Div with the curved top one, so I was considering using the following CSS properties: top: -39px; width: 260px; Would usi ...

htmlcss

Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

For instance: Press a button - one div flies off the screen while another div flies in. Press the button again - Same div flies out, other div returns. I'm completely new to Javascript/JQuery so any assistance would be highly appreciated! Thank you ...

javascriptjqueryhtmlcss

Methods for dynamically populating dropdown lists with JavaScript and Bootstrap

I have collected all 387 regions for the current date and now I want to dynamically populate a bootstrap dropdown with these regions using JavaScript. Below is the basic HTML code for a bootstrap dropdown: <div class="dropdown"> <button class ...

javascripthtmlcsstwitter-bootstrap

Using JavaScript to generate a <style> element and accessing the cssRules

After spending countless hours trying to solve this problem, I'm hoping that my question isn't too foolish. This is a continuation of a previous question about creating a style tag with JavaScript on Stack Overflow. The solutions provided by Tom ...

htmlcssgoogle-chromesafaristylesheet