How to alter the color of a Twitter bootstrap progress bar

Recently, I have been exploring Twitter bootstrap and encountered an issue while trying to customize the progress bar. Despite my efforts, I am unable to display the progress bar on the screen.

Here is the code snippet that I have been working with. Despite numerous attempts, I cannot pinpoint what exactly is causing this problem. Could it be related to the version of Bootstrap that I am currently using?

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

HTML

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

CSS

.bar {
    background-color: green;
}
htmlcsstwitter-bootstrap

Answer №1

To ensure the .bar element has a visible height, set its height to 100%, otherwise it will default to 0 due to lack of content.

.bar {
  background-color: green;
  height: 100%;
} 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

Answer №2

It seems that the CSS class you are using for the progress bar is incorrect. I recommend trying out the "progress-bar" class instead of "bar". Take a look at this example:

HTML 

<div class="progress">
  <div class="progress-bar" style="width: 60%;"></div>
</div>

CSS 

.progress-bar {
  background-color: green;
}

For more information, please visit: http://getbootstrap.com/components/#progress

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 is the best way to switch the site header in JavaScript or jQuery?

I have created a Bootstrap menu design and I am looking to add a sliding functionality to it. My goal is to hide the menu when scrolling down and display it when scrolling up (slide-down / slide-up). For implementing this feature, I plan to utilize jQuery ...

javascripthtmljquerybootstrap-4

Enhancing user experience by highlighting invalid input fields with a red border using client-side HTML5 validation and Bootstrap 5.2

When reviewing the Bootstrap 5.2 validation documentation, https://getbootstrap.com/docs/5.2/forms/validation/ "It has come to our attention that the client-side custom validation styles and tooltips are not accessible at this time, as they are not ...

htmlcssformsvalidation

What is the best way to utilize regex in converting this CSS block to LESS?

Currently undertaking the task of refining over 10,000 lines of CSS code. Instead of manually converting line by line, I aim to transform from this: -webkit-transition: .1s linear all; -moz-transition: .1s linear all; transition: .1s linear all ...

javascriptcssregexreplaceless

Adding turbolinks to an HTML document can be achieved without the need for a

Recently delving into the world of turbolinks, I discovered that it can be employed independently without relying on a client-side javascript framework. Eager to test this out, I created a bootstrap 4 template and attempted to install it. Firstly, I downl ...

javascripthtmlnode.jsbootstrap-4turbolinks

Tic Tac Toe is not functioning properly

Hey there! Can someone please help me figure out what's going on? I'm trying to create a Tic Tac Toe game, but instead of using "O" and "X" to mark the fields, I want to use different colors. Specifically, one player should be able to mark with b ...

javascriptjquerycss

Select2 is not compatible with the 'append' function

The Select2 functionality is not working properly when a new select tag is appended, and an error appears in the console (Uncaught TypeError: $(...).select2 is not a function). <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js" ...

javascriptjqueryhtmljquery-select2

Analyzing the status of HTML resources in Google Chrome's DOM analyzer, comparing the cache version to the "not

When using Google Chrome, I navigate to a URL of an ASP.NET website after activating the DOM inspector (F12). By selecting the Network tab, I am able to view the requested resources along with their status, timeline, and more. Upon subsequent requests, som ...

htmlcssasp.netgoogle-chromebrowser

I am experiencing difficulties updating my website

Is there a way to automatically refresh my webpage in PHP whenever I press the enter key? ...

phphtmlcss

What sets apart 'hasClass' from 'is'? Additionally, is there a substitute to retrieve a Jquery element instead?

Similar Question: jQuery .hasClass() vs .is() Sample HTML code: <div class="results"> <div class="table"> <form class="tr" action="#" method="post"> <div class="td"> <input class="dat ...

javascriptjqueryhtmlfilter

How can I disable a select element in Laravel 5?

Hey everyone! Currently using Laravel 5 and trying to style the "select" class as "selectpicker". I'm facing an issue where I want to disable or hide the selected option when clicked, as I'm creating a div with the option's content right b ...

javascriptjquerycsslaravelbootstrap-4

Firefox: log shows no CSS errors or warnings

I decided to play around and create a website with a completely made-up CSS code: a { foobar: 8888; } Upon opening the page in Firefox, I checked the web console expecting to see errors or warnings. However, surprisingly, there were none. Why is tha ...

htmlcss

How can I resolve the issue of <td> being repeatedly displayed five times instead of just twice in PHP?

Can someone assist me with fixing this for loop issue? I am trying to display controls next to each item in the row, but it is showing 5 sets of controls instead of just 2. <tbody> <?php //retrieve list of supplies $numOfRows = 0; $result = my ...

javascriptphpcsshtml

The HTML table is failing to display

I have a CSV file called travelq.csv and I'm attempting to automatically generate a table from the data it contains. The h1 heading is loading, but unfortunately, the table is not displaying as expected. I am unsure of where I may have made a mistake ...

javascripthtmlnode.js

Tips for incorporating a visible HTML comment in JSX code?

Currently implementing ReactJS and facing a requirement to insert visible HTML comments (visible in the html source) within JSX. Unsure of the correct approach to achieve this. A third party vendor necessitates this comment for processing purposes on the ...

htmlreactjscommentsjsx

What is the best way to adjust my column position in order to make the links clickable?

Looking for help with a mobile version website menu bar design. The issue is that the central "+" button is covering the two icons on either side, making them unclickable. Is there a solution to rearrange this layout? Here is the current design: https:// ...

htmlcssbootstrap-4

Show a div once all its content has been fully loaded

I have a section on my webpage that includes images, text, and links. It functions as a carousel. My goal is to show the section only after all content has loaded. I am looking to transition from opacity 0 to opacity 1 with a fade-in effect. Here is the ...

jqueryimagehtmldocument-ready

Having trouble with Facebook sign-in getting stuck on a blank page?

Upon encountering a blank page, I decided to check the source in Chrome and found the source code of the intended page. The issue lies with this Facebook login application page; it seems to get stuck on a blank page without showing any errors. Upon refres ...

phperror-handlinghtmlfacebook-loginlogin-script

Is it possible to adjust the position of a h2 heading on a particular webpage using CSS?

There is a situation where multiple pages contain h elements nested inside a standard container div class. When trying to edit a specific h2 element in a specific page using CSS, simply editing the h2 or the container does not work. Other methods attempte ...

jqueryhtmlcsscontainers

Having trouble with -moz-box-flex not flexing? It works perfectly with (Chrome/Webkit) browsers!

I have been searching for hours to figure out why Firefox is not flexing my page content in HTML/CSS. It's working fine in Chrome, and I've double-checked that each -webkit-box-flex has a corresponding -moz-box-flex. Can anyone point out what I m ...

csshtml5-canvas

Convert an HTML webpage into a JSON format that represents the structure of the DOM tree

I am having an index.html file with multiple div tags inside it. I am attempting to retrieve content from all the div tags on the page, but currently, I am only able to fetch the content from the first div tag. What I actually need is the content from all ...

phphtmljsondomhtml-parsing