Progress bars are stacking up and all the same color, but I need them to be different colors

I'm looking to create a stacked progress bar with different colors, similar to the example shown under "multiple bars" on this website: https://getbootstrap.com/docs/4.0/components/progress/

I've experimented with various code options, but all of them result in a stacked progress bar with all bars appearing blue. Here is one attempt I made:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Even though there are no error messages, I'm not able to achieve the desired effect of having three distinct colors for each bar. Is the following CSS link not enough?:

I would greatly appreciate any assistance as I am still learning :)

htmlcssbootstrap-4

Answer №1

Make sure to include the 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
in your code because Bootstrap 4 is being used, not 3.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Answer №2

Everything appears to be functioning correctly, please make sure to update your CSS and JS files to the latest versions.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Answer №3

Try updating your Boot strap link file by replacing it with
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

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

Styling Easy-Autocomplete with jQuery

I am currently working on integrating autocomplete functionality using the jquery easy-autocomplete plugin npm install --save easy-autocomplete I am facing two issues related to its styling. The results are being displayed in a bulleted list format. I ...

jquerycssbootstrap-4laravel-8easyautocomplete

Unable to alter fxFlex property within Component using "setAttribute('fxFlex', '25%')" does not function properly in Angular 6

Currently, I am utilizing the flexLayout module to create responsive divs in my Angular application. You can find more information about flexLayout at https://github.com/angular/flex-layout and also at https://alligator.io/angular/flex-layout/. const nav ...

htmlangulartypescriptfrontendangular-flex-layout

Add multiple images to various div containers

I am facing a challenge with my code as I am trying to upload and display two different files inside of two different divs using two buttons. Currently, my code is only working for one image. How can I modify the code to handle two images successfully? Any ...

javascriptjqueryhtmlcssfile-upload

Creating an Unordered List in GWT that Includes List Items

I've hit a roadblock while trying to create a css-driven menu in GWT. The menu should be rendered exactly like this: <div class="topbar"> <div class="container fixed"> <h3> <a href="" class="logo">test& ...

htmlcssgwttwitter-bootstrap

Is there a way to deactivate a button in Angular when an <input> field is blank, without relying on form validation?

Looking for a way to utilize @output in Angular, I have set up an input field with a button. The goal is to send the input field data to the parent component using @output(). My challenge is to disable the button if the input field is empty, without relyin ...

javascripthtmlangularjsangularangular2-databinding

"What is the method for children elements to inherit color from the parent element using tag attributes both before

Utilizing bootstrap 4 and sass in my project, I have an html element styled with a color designated through the span tag as follows... <div class="non-semantic-protector"> <span class="badge badge-primary">testing</span> </div ...

sassbootstrap-4

Always keep this checkbox checked and only uncheck the others when necessary

Whenever I check a checkbox and then click on another checkbox, I don't want the initially checked checkbox to be unchecked, but rather a different one... For example: If I check checkbox 1, only checkbox 1 is checked; If I check checkbox 2, both ...

javascriptjqueryhtmlcheckbox

Use JavaScript to identify and color the intersecting area of two triangles that overlap on a webpage

I created two triangular divs using HTML and I am utilizing jQuery UI to enable them to be draggable. Now, my goal is to overlap these two triangles and change the color of the overlapping area to a different shade. Here is an example: https://i.sstatic. ...

javascriptjqueryhtmlcss

What is the best way to ensure these 2 divs are aligned vertically in the provided html (starting at the same vertical level)?

<div class="container"> <div class="row"> <div class="col-lg-12"> <div class="news-title"> <h3 class="title">NEWS & ARTICLES</h3> ...

htmlcsstwitter-bootstrap

Encountering difficulty extracting information from JSON file within AngularJS factory

I am struggling with a Json file named discover.json located at json-files/discover.json {"data": [ {"username": "aky123", "name": "ajay"}, {"username": "sky123", "name": "sanjay"} ]} Below is my factory setup: var myAppServices=a ...

javascriptangularjsjsonhtml

Show search results using jQuery in a Smarty template

I am attempting to showcase a search result within a <div> on a smarty template. The search result originates from a click action. The anchor in question is as follows: <li class="price-list-item"><a href="javascript:void();" class="price" ...

phpjavascriptjqueryhtmlsmarty

The execution of jQuery was hindered due to the implementation of PHP include

Having an issue with jQuery not working in index.php when including the file header.php. The nav sidebar is included, but clicking the chevron does not trigger anything. It only works when I directly include header_user.php without checking the UserType in ...

javascriptphpjqueryhtmltwitter-bootstrap

What could be the possible reason for the controls in my element getting disabled due to adding a JavaScript background

First and foremost, I want to share a link with you to a page that I am currently developing so you can better understand the situation: Additionally, here is a link to the background effect: https://github.com/jnicol/particleground If you visit the page ...

javascripthtmlcsswordpress

Ways to solve the issue of the mobile dropdown menu in Bootstrap

Check Out the Expected Look Here (Image link) See How it Appears on Mobile Devices The dropdown menu causes an increase in the size of the navbar on the mobile version. Below is the code snippet: <div style=" background-image: url(https://i.imgu ...

htmlcsstwitter-bootstrapbootstrap-4

Can the order of event bubbling be altered in JavaScript?

I have three boxes in my HTML, each with its own click events. Currently, when I click on a child element, event bubbling occurs in the order of C->B->A. However, I am curious to see if it's possible to change the event bubbling order to C-> ...

javascripthtmlangular

What causes AJAX to return the newest variable from a loop in an HTML template?

Below is the HTML file I am working with: <div id="preview_updated_notifications"> {% for lst in unread_list %} <div > <span data-notification-item="{{ lst.id }}" id="_mark_as_read_id" ...

htmljquerydjangoajax

Shifting divs to different positions upon clicking

I am currently working on a project where I have three divs in a container positioned next to each other. My goal is to make them change their positions when clicked. For example, clicking on the left div should move it to the center position. Here is my p ...

javascripthtmljquerycssjquery-animate

Chrome is currently experiencing a problem with embedded fonts, causing the bottom of the customer's font to be

Greetings, I am encountering a font-face issue specifically in Chrome on Windows. Below is the code snippet causing the problem: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta ...

htmlcssfont-faceembedded-fonts

The use of Angular's ngClass directive does not work within the link function

I have a straightforward directive that renders an element, and this is the template: <div class="nav-item"></div> The .nav-item class looks like this: .nav-item { height: 50; } Here's the directive in action: angular.module('m ...

javascriptcssangularjs

Tips for altering the orientation of documents in Docusaurus

Instead of having a landing page on my Docusaurus 2 site, I redirect to the first .md file in the sidebar following instructions from this link: Now, I'm looking to create a multi-language website with English and Persian. The Persian version needs t ...

cssreactjssassmultilingualdocusaurus