Applying CSS fails when transferring it to a stylesheet

I encountered an issue with a Bootstrap progress bar that is causing conflicts with my CSS. I am attempting to move the CSS to a separate stylesheet instead of embedding it in my ejs file. However, when I try to link it using

<link href="/views/stylesheet.css" rel="stylesheet">
, it doesn't work and I end up losing my styling.

Although I don't think it matters, this is the part of code that is overriding my css

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rV" crossorigin="anonymous">

This is my current file structure

Views |_Index.ejs, stylesheet.css, template.ejs

The issue is taking place within my index.ejs file, and not on the node backend (not listed in the file structure)

Finally, here is the code for my progress bar:

<div id="loadingcontainer">
<div class="progress" style="height: 5px;">
    <div id="myprogress" class="progress-bar" style="color:#EB7051;" style="background-color: #ffffff" role="progressbar" style="width: 25%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>
htmlcssbootstrap-4ejs

Answer №1

Update the link tag to:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Replace the HTML with:

<div id="loadingcontainer">
<div class="progress" style="height: 5px;">
    <div id="myprogress" class="progress-bar" style="background-color: red; width: 25%; color:#EB7051;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

Reference: https://getbootstrap.com/docs/3.3/components/#progress

Live demo: https://codepen.io/manaskhandelwal1/pen/MWjNGxr?editors=1000

For better compatibility, consider using this updated version of bootstrap:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbc8cf9e2fce2fce1aea9b8adfd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

Updated HTML:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Reference: https://getbootstrap.com/docs/5.0/components/progress/

Live demo: https://codepen.io/manaskhandelwal1/pen/jOMgxRw?editors=1000

Answer №2

In the event that your styles are being overridden by bootstrap CSS, consider this solution: Make sure that your "/views/stylesheet.css" is included after the "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" link in your HTML document.

If this doesn't resolve the issue, it may be stemming from a different source.

Another approach you can take is to ensure that your custom CSS selectors have more specificity than those of Bootstrap. For example: if Bootstrap's style is

.loader-class {
  color: red 
 }

yours should be:

.loader-class span { 
  color: red 
}

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

Is there a valid substitute for using hot links with images?

Currently, I am instructing a group of individuals on the intricacies of web development with a specific focus on AngularJS. As part of an exercise that I designed for them, they are required to fetch data from the freely accessible pokeapi.co. One interes ...

htmlangularjsimageapihttp-status-code-403

Using Python, Scrapy, and Selenium to extract dynamically generated content from websites utilizing JavaScript

I am currently utilizing Python in combination with Selenium and Firefox to extract specific content from a website. The structure of the website's HTML is as follows: <html> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> ...

javascriptpythonhtmlseleniumscrapy

How can I create a design that adjusts to show 5 columns on larger screens and 2 columns on smaller screens using Bootstrap 4?

I am working on a responsive column layout for an online store. I need to display 5 columns on large screens and 2 columns on mobile screens using Bootstrap4. However, on screens below 576px width, only one column is being rendered instead of two. How ca ...

htmltwitter-bootstrapcssbootstrap-4

Issues with the styling of HTML code

Our website features a main menu with submenus that are intended to be displayed only when hovering over the main menu. However, upon loading the site, the submenu is already visible causing an issue. We need the submenu to appear only when the main menu i ...

javascripthtmlcss

Angular.js <div ng-include> not expanding to the full height of the viewport

My goal is to create a single-page app with a scrolling effect using Angular.Js. Each ng-include section within the <div class="viewport" ng-include="'views/file'" ng-controller="MainCtrl"></div> should fill the viewport entirely. How ...

htmlcssangularjs

The bootstrap carousel seems to be malfunctioning and instead displaying as background images

As someone who is new to coding, I have been attempting to create a slider on Bootstrap, but it seems to be displaying more like a background than an actual slider. Here is an excerpt of my HTML code: <body> <div class="navbar navbar-default ...

jqueryhtmlcsstwitter-bootstrapcarousel

Design a dynamic top navigation bar in Angular or any other framework that automatically adjusts to the size of the screen, similar to the responsive bookmarks bar in

Could you offer guidance or suggestions on how to design a navigation bar (using Angular 1, jQuery, CSS, etc) that emulates the functionality of Google Chrome bookmarks bar when resizing the page? Essentially, as the page size decreases, a new button/symbo ...

javascriptjqueryhtmlcssangularjs

Experiencing problem with hover:after effect on Internet Explorer 8

I've been working on incorporating the CSS effect found on this website: Everything seems to be functioning properly except for the fix provided for IE8. I added some conditional code so that the fix is only applied to <= IE8, and as a result didn ...

csspseudo-class

Can you please explain what shape-id denotes and provide guidance on locating it within a CSS file?

I have a question that may seem trivial to experienced web developers - what exactly is "shape-id"? For example, in the code <hr shape-id="2">. I'm currently attempting to change the color of the horizontal lines (hr) on my website, but I can& ...

htmlcss

Failing to upload a file along with other form elements in Flask results in a 400 error

Encountering a 400 error when attempting to upload a file and send other form elements to Flask from HTML. Tried using AJAX, but it also gives me an error. Python: @app.route('/prod_diff_result', methods=['POST']) def prod_diff_result ...

pythonhtmlfileflask

Determine whether a click event originated from within a child window

Currently, I am utilizing window.open to initiate a new window in javascript and my goal is to identify clicks made within the child window. Essentially, if a click event occurs in the child window, I aim to modify the parent window accordingly. I have a ...

javascriptjqueryhtml

Steps to turn off a Material UI CSS class for an element universally

Utilizing the Material UI Typography element with the css class MuiTypography-h1, I am seeking to globally disable its usage throughout the entire codebase. <Typography variant="h1" sx={{ width: '100px', height: '55px ...

javascripthtmlcssreactjsmaterial-ui

a container holding two floating divs

I have been attempting to create two divs positioned side by side, with one containing content and the other acting as a sidebar. Both of these divs are contained within another larger container div. Despite my efforts, I have not been successful in achiev ...

htmlcsscontainers

What is the process for setting up custom HTML tags in Resharper?

I am looking to customize my HTML files by using custom tags to incorporate knockout components [1]: <like-widget params="value: userRating"></like-widget> To enable the tag in VisualStudio's HTML formatting settings, I made the followin ...

htmlresharpercustom-tags

What is the best way to determine the length of an array using input from an HTML form?

Currently, I am in the process of developing a PHP file and one feature that I would like to implement is creating an array as illustrated in Example 1. As far as my understanding goes, an Array functions like a list where items can be added as shown in Ex ...

phphtmlarraysforms

Aligning a div in relation to the background image

I am seeking guidance on how to center a Div Box and make it responsive relative to the background image. The div box should be contained within the white box, similar to the example shown here: body{ font-family: 'Roboto Mono', monospace; ...

htmlcssimagecenter

The navigation bar is missing from the screen

Where is the navbar in this snippet? Did I overlook something important? If so, what? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="navbar nav ...

csstwitter-bootstrap

Having trouble converting customized tabs into Bootstrap navigation tabs?

Creating custom tabs with unique tab logic <!-- <lntds-tabs [selectedIndex]="selectedTabIndex" (selectedTabChange)="tabChanged($event)"> --> <!-- <lntds-tab class="custom-tab-group lntdstabsco ...

htmlangularbootstrap-4

What is the best way to eliminate the border-bottom of the final div separator using CSS?

I have set up a div box to display the latest news, with each news item separated by a border-bottom. Instead of using ul li in the HTML, I am opting for simple div elements. However, I am encountering an issue where the last news item also displays the bo ...

htmlcss

Is the use of the auto image attribute height/width impacting rendering performance?

Currently, I am facing an issue with setting the height and width attributes for an image as I do not have access to its dimensions from the server. One solution I am considering is setting both the width and height values to auto. For example: img { ...

htmlcssimage