Not all customized CSS is overruling the Bootstrap 4 configurations, only some are making an

Excuse my lack of knowledge on this subject, I am new to this and feeling a bit lost!

I have created a simple webpage () using Bootstrap 4 and now I want to customize the colors and design to match my brand. Most parts are working fine, but I'm having trouble with a button. I have successfully changed the text color of the button in its default state and hover state. However, I am struggling to change the background color in both states. Here is the CSS code I am using:

.btn-light {
  background-color: #fcf8d7 !important;
  background-image: none !important;
  text-shadow: none;
  color: #714c82;
}

.btn-light:hover{
  background-color: #714c82;
  background-image: none;);
  color: #939393;
  text-shadow: none;
}

In my HTML file, I have:

<a href="mailto:..." <button type="button" class="btn btn-light btn-lg"><i class="far fa-envelope"></i> Email Us</button></a>

Additionally, the code doesn't seem to change the text color when I use it in my online CSS file. It only works when added within <style> tags in my html file, even though it works fine offline in the CSS file.

I hope this all makes sense.

Does anyone know what could be causing these issues?

htmlcssbuttonbootstrap-4

Answer №1

It is advisable to omit the use of important as it is unnecessary. Additionally, there are syntax errors in your code such as background-image: none;);

.btn-light {
    background-color: #fcf8d7;
    background-image: none;
    text-shadow: none;
    color: #714c82;
}
.btn-light:hover {
    background-color: #714c82;
    background-image: none;
    color: #939393;
    text-shadow: none;
}

This is how the button will appear on hover: https://i.sstatic.net/UHecQ.png

Furthermore, there is a syntax error in the following line:

<a href="mailto:..." <button type="button" class="btn btn-light btn-lg"><i class="far fa-envelope"></i> Email Us</button></a>

The corrected version should be:

<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3e3b2c3f1a3e39382a28353e2f392e33353429743935742f31">[email protected]</a>" class="btn btn-light btn-lg"><i class="far fa-envelope"></i> Email Us</a>

Answer №2

Avoid using !important as advised in a previous comment. It's important to understand CSS specificity.

Each selector holds a position in the specificity hierarchy, which is divided into four categories defining the level of specificity:

  • Inline styles - Directly attached to the element for styling, e.g., .
  • IDs - Unique identifiers for page elements like #navbar.
  • Classes, attributes, and pseudo-classes - Includes .classes, [attributes], :hover, :focus, etc.
  • Elements and pseudo-elements - Consisting of element names and pseudo-elements such as h1, div, :before, and :after.

To override styles effectively, you must enhance the specificity of your CSS. One simple approach is to prepend the element type to the style. For instance, your style could look like this:

button.btn-light {
  background-color: #fcf8d7;
  background-image: none;
  text-shadow: none;
  color: #714c82;
}

button.btn-light:hover{
  background-color: #714c82;
  background-image: none;
  color: #939393;
  text-shadow: none;
}

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

Refreshing the webpage upon submitting with Angular2 and Firebase technology

Yesterday, I came across an Admin HTML template that I wanted to integrate with Firebase. However, when I tried to register and clicked on Sign in, the page would reload instead of carrying out the Firebase createUserWithEmailAndPass process. Here is a s ...

htmlangularfirebaseangular2-routing

Challenge with AngularJS ng-select and ng-switch-when functionality

Struggling with implementing a selection menu on my angular charts, I encountered some challenges. The selection app template I used only displays the selection menu and graph axis on the page. Checking the console log for errors, I noticed one src URL wa ...

javascripthtmlajaxangularjsd3.js

Manipulate the value(s) of a multi-select form field

How can you effectively manage multiple selections in a form field like the one below and manipulate the selected options? <select class="items" multiple="multiple" size="5"> <option value="apple">apple</option> <option va ...

javascriptjqueryhtmlforms

Surround the image with horizontal links on each side

I am attempting to design a horizontal unordered list with an image positioned in the center of it. I am facing the challenge of not being able to insert the image directly within the unordered list. Is there a way to align the image in the center while ha ...

css-floatcss

The issue with the $(window).width() property not functioning correctly in Internet Explorer

Currently, I have a Div element with absolute positioning: <div id="target" style="height: 300px; position: absolute; top: 275px;"></div> My goal is to calculate the horizontal resolution of the screen using JavaScript. With this width, I the ...

javascripthtmlasp.netcssinternet-explorer

Button within the Magnific Popup (do not use to close)

I am currently developing a website with a gallery page that utilizes the Magnific Popup plugin. My client has provided lengthy 'captions' for each image, almost like short stories. To display these captions effectively, I have utilized the titl ...

javascriptjquerycssmagnific-popup

What could be causing a specific CSS class to not take effect?

Recently, I embarked on a journey to learn Django framework with Python. My main source of knowledge is a course I found on YouTube. However, I encountered an issue where the CSS and JS features were not applying to my page as demonstrated in the course. ...

cssdjangobootstrap-4

Press on any two table cells to select their content, highlight it, and save their values in variables

I have a table retrieved from a database that looks like this (the number of rows may vary): |Player 1|Player 2| ------------------- |Danny |Danny | |John |John | |Mary |Mary | My goal is to select one name from each Player column and sto ...

javascripthtmlmysql

The entire space on an HTML page should be occupied with content from the header to the footer

I am currently implementing jQuery Mobile on my project. The page I have created consists of a fixed header and footer with only two buttons. Due to the fixed footer, half of the page is in silver color (data-theme=c) while the bottom half is gray. My goa ...

jqueryhtmljquery-mobile

Combining Bootstrap Vue: utilizing class names alongside HTML tags

(Bootstrap-Vue 2.0, Vue.js 2.5) Is it possible to combine traditional CSS Bootstrap 4 classes with Bootstrap-Vue? For example, can I use the following code snippet: <section id="introduction"> <b-container class="h-100"> & ...

cssvue.jsbootstrap-4bootstrap-vue

What is the best way to position an iframe or div adjacent to or preceding the <script> tag?

Is there a way to dynamically insert an iframe/div using javascript before or after the <script> block, similar to how Google ads are embedded? I have a script tag within an HTML document and I want an iframe to display in the same location when the ...

javascriptiframehtml

How to implement HTML5 Application Cache in an ASP.NET MVC4 project to enable offline functionality for a web application?

Exploring the concept of app caching in HTML5 with static content and file extensions such as index.html, theme.css, and app.js. When it comes to using MVC4 for a web app, how can we cache dynamic data obtained from an API and stored in localStorage? I a ...

javascriptasp.net-mvchtmlweb-applicationsapplication-cache

Can you share the updated class name for indicating errors in input groups in Bootstrap 4?

I am currently working on creating a form. I want to implement a feature where incorrect data entered will be highlighted in red, and correct data entered will be highlighted in green. This is the code snippet from my .js file: function checkForm() { v ...

javascriptbootstrap-4

My image is not appearing on Google Chrome when using HTML

Every time I attempt to access an index.html file via a web browser, the images fail to display and instead, a broken image icon appears. Upon inspecting the page's elements, I encountered the following error message: Failed to load resource: net: ...

htmlimagegoogle-chrome

Can you provide me with advice on how to make a materialize table responsive?

Here is the script I am using: <table class="responsive-table"> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thr</th> <th>Fri& ...

cssbootstrap-4responsivematerialize

Is there a way to display the contents of a zipped file using an HTML IFrame?

Can I display the contents of a zipped file in an HTML iframe? For example: My_File.pdf.zip contains My_File.pdf. I currently have something like this <iframe src="/path of the folder/My_File.pdf.zip" /> The src attribute points to the zipped file ...

javascriptjqueryhtmliframe

The hover effect is not activated by the mouse movement event

I previously encountered an issue related to flickering with an absolute div when moving my mouse, which I managed to resolve by increasing the distance between my mouse pointer and the div. Now, I am working on the next phase of my project: My goal is t ...

javascriptjqueryhtmlcss

"Engaging with the touchscreen inhibits the triggering of click

Within this div, I have implemented touch-action:pan-y;. Surrounding this div is an anchor tag. If you click on the div, the link will successfully redirect. However, if you swipe on the div and then click, the link won't work on the first attempt bu ...

javascriptcss

CSS-only checkboxes are not functioning properly in WordPress

I discovered some amazing pure CSS checkboxes that I wanted to implement (http://codepen.io/imohkay/pen/zFwec) on a WordPress website utilizing the Contact Form 7 plugin. However, after selecting these checkboxes, nothing seems to happen. To resolve this ...

htmlcsswordpresscontact-form-7

The close button within the modal is malfunctioning even with the implementation of the on() function

My "show more" button triggers the modal to pop up, but when I click on the X button in the top left corner, it doesn't close as expected. However, clicking outside of the box or pressing the "esc" key does work. I suspect that the issue lies with th ...

javascriptjquerycssbootstrap-5