Personalize Progress Bar with Bootstrap 4

I am working in Bootstrap 4 alpha and I'm having trouble customizing certain elements like the border-radius, bar base color, and filled color. Can anyone help me figure this out?

I've tried to manipulate the code below, but unfortunately, it's still not quite right.

Check out a live demo here

HTML Code:

<div class="b4-test">
  <progress class="progress" value="75" max="100">75%</progress>
</div>

CSS Code:

.b4-test{
  padding:50px;
  width:500px;
  margin:50px auto;
  text-align:center;
  background:#ccc;
}

progress{
  border-radius:0 !important;
  background-image:none !important;
  background-color:red !important;
  color:green !important;
  height:50px;
}
csstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Answer №1

Make sure to view this code snippet in Firefox

This code will only run properly in Firefox.

Update

I've also set up a plunker to demonstrate the code behavior in Firefox, please take a look:

Firefox Plunker

.b4-test {
  padding: 50px;
  width: 500px;
  margin: 50px auto;
  text-align: center;
  background: #ccc;
}
.progress[value] {
  border-radius: 0;
  background-color: red;
}
.progress[value]::-moz-progress-bar {
  background-color: green;
}
<div class="b4-test">
  <progress class="progress" value="75" max="100">75%</progress>
</div>

For viewing in Chrome, refer to the following plunker

You can see it in action here: Chrome Plunker

Answer №2

Encountered a similar issue, but my goal was to simply modify the color of the progress section.

This is how my progress bar looks:

<progress class="progress progress-custom" value="25" max="100">25%</progress>

To achieve this, I included the custom class progress-custom and applied some CSS rules to it.

.progress-custom[value]::-webkit-progress-value {
  background-color: #FE6502;
}

.progress-custom[value]::-moz-progress-bar {
  background-color: #FE6502;
}

.progress-custom[value]::-ms-fill {
  background-color: #FE6502;
}

@media screen and (min-width: 0\0) {
  .progress-custom .progress-bar {
    background-color: #FE6502;
  }
}

These additional CSS properties will alter the color of the progress section. I also experimented with adjusting the border-radius, which can be customized as desired.

I conducted a quick test: Chrome and Firefox displayed the changes correctly, while IE reflected the correct color but encountered issues with the border-radius adjustment.

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

Adjusting the Layout of the Sidebar in HTML and CSS

I am in the process of designing a custom template for my eBay listings. My goal is to include a sidebar that floats to the right of the main text body. However, I have encountered an issue where, when I paste the source code into the eBay listing, the sid ...

htmlcssalignmentsidebar

What is the best way to apply CSS exclusively to a single element on a webpage?

As an illustration, I desire the following: <link rel="stylesheet" href="stylus.css"> specifically for this snippet of code: <a href="yeet">Buy!</a> ...

htmlcssw3.css

I am experiencing an issue with the Search Filter where it is not successfully removing

My goal is to filter colors when a user searches for a color code. Currently, the search function displays the correct number of filtered items, but the color bubbles are not being removed as intended. I am working on removing the bubbles when a search is ...

javascripthtmljquerycss

Conceal additional text by truncating it within the parent div instead of allowing it

I'm struggling with a limited space to display text and I want to avoid line breaks, scrolling, or overflowing the parent div. My specific issue involves text within an anchor tag, so I created a sample component to illustrate my goal: function Com ...

javascriptcssreactjs

Module for Django that reduces the length of CSS classes during deployment

Currently, I have a CSS class defined as follows: .footer-react-btn{ color:#ddd; } If I were to change the css class .footer-react-btn to simply .a or .b, it may optimize the loading of text bytes. This optimization is something I desire for my produc ...

javascriptpythonhtmlcssdjango

firefox image display problem caused by text overlapping

When viewing my page on a tablet, I am experiencing issues with overlapping elements that do not appear in desktop or mobile views. I have tried adjusting the viewport width without success. Any guidance on how to resolve this problem would be greatly ap ...

csshtmltwitter-bootstrap

Stopping form elements from pushing through their submission

I'm facing a unique use case that I know may not have a straightforward solution. Is there any method to prevent specific form elements from being submitted? One idea I had was to dynamically remove the 'unwanted' elements from the page aft ...

javascriptjqueryhtmlcss

Showing XML content with JavaScript

Trying to parse a simple XML list using JavaScript, but having trouble formatting it the way I need. <TOURS> <MONTH> <TOUR> <NUMBER>1</NUMBER> <VENUE>City Name - Venue Name</VENUE> < ...

javascriptjqueryhtmlcssxml

The CSS is acting unexpectedly by applying styles to elements that were not intended to be styled

I am trying to style 2 specific elements within a div that has the class promotion, setting their text color to white. .promotion h1, p { color: #FFF; } <section> <article class="promotion grid-col-span-3 text-center"> <h ...

htmlcss

When viewing HTML emails in dark mode on iOS Gmail, the CSS appears to be inverted

While sending an HTML email from a nodejs app, I encountered an issue with Gmail on iOS where elements with background-color or color properties were getting reversed. This was most noticeable on black and white elements. Despite consulting various guides ...

htmlcssnode.jsemailgmail

Avoid scrolling when the element changes size

I've created an angular directive that conceals element a when the user scrolls on element b. The functionality works smoothly, but I'm encountering a peculiar behavior that has me puzzled: https://i.sstatic.net/NadtZ.gif Although it may not be ...

javascripthtmlcssangularjstypescript

Troubleshooting issue: Bootstrap button onclick function not firing

My node express app is using EJS for templating. Within the app, there is a button: <button type="button" class="btn btn-success" onclick="exportWithObjectId('<%= user.id %>')">Export to csv</button> Accompanying the button i ...

javascriptnode.jstwitter-bootstrapejs

Does Firefox offer support for carousel Bootstrap v4.0?

Upon testing the carousel bootstrap v4.0 example in Firefox browser, I encountered an issue where the images-item doesn't slide. After analyzing the problem, I suspect that it might be a bug within Bootstrap itself. Is Firefox compatible with carous ...

bootstrap-4

Configuring the space beneath a multi-line text with a bottom border distance or shadow

I am looking to add a bottom border with less spacing than default for specific text, creating a look similar to this image: https://i.sstatic.net/sCQii.png Unfortunately, it seems the border property cannot achieve this effect. I am experimenting with t ...

htmlcss

"Incorporating a variety of images in a random order with

Wanting to create a fun game on my website using JavaScript, where hotdogs are added to a bowl in random positions forming a pyramid-shaped pile that eventually covers the entire page. However, I'm facing some challenges with the implementation. The ...

javascripthtmlcss

Expanding the MatBottomSheet's Width: A Guide

The CSS provided above is specifically for increasing the height of an element, but not its width: .mat-bottom-sheet-container { min-height: 100vh; min-width: 100vw; margin-top: 80px; } Does anyone have a solution for expanding the width of MatBott ...

javascripthtmlcssangularangular-material

Why isn't it working? Looking for a script that adds a class when the element is empty?

I have a script that should add the class "leftmax" to the li element with id "spect" when the div element with id "tab2" is empty, but it doesn't seem to be working. Can someone provide some assistance? <script type="text/javascript"> $(funct ...

jquerycsstabsshow-hide

What is the best way to customize the Bootstrap CSS for an <a> element?

I recently started a blog and wanted to streamline my design process by using Bootstrap to avoid having to deal with media queries. However, I encountered an issue where the <a> element was displaying as blue. I have another CSS file that is loaded a ...

htmlcssbootstrap-4

Printing the footer on a page in ASP.NET is essential for providing additional information

I need to print an HTML page with specific content. The content includes a div with some text to be printed. Additionally, I have a footer with a class of divFooter that contains more content. <div>content to print</div> The CSS for styling t ...

asp.nethtmlcss

What is the best way to position the button in line with multiple dropdown menus that include labels?

My interface consists of 3 dropdowns and a submit button, each with a label. Initially, I struggled to align the button with the dropdowns themselves (not the labels), so I resorted to adding a placeholder label and matching its color with the background. ...

htmlcsstwitter-bootstrapbootstrap-4