Is there a way to horizontally align the label of the React Bootsrap ProgressBar component?

While working with React-Bootsrap ProgressBar, I couldn't help but notice that the component aligns its label based on its value: Check out this progress-bar example

Is it possible to center the label regardless of its value? Here's an example of what I'm aiming for: (random example)

This is my component:

<ProgressBar
    now={....}
    label={....}
    className={....}
/>

This is how it looks like in browser dev tools:

<div class="..... progress">
    <div role="progressbar" class="progress-bar" aria-valuenow="40" aria-valuemin="0" aria-   valuemax="100">
        dummy
    </div>
</div>

I've attempted to style the progress and progress-bar classes, but I can't seem to style the text inside

cssreactjsprogress-barreact-bootstrap

Answer №1

Absolutely, you can achieve this by following these steps.

<ProgressBar 
now={60} 
label={`${60}%`}
className="progress-bar-wrapper"
/>

Additionally, in the CSS section:

.progress-bar-wrapper {
  position: relative;
}

.progress-bar-wrapper::after {
  content: attr(data-label);
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer №2

Just wanted to mention that I raised an issue on the react-bootstrap GitHub regarding this topic: https://github.com/react-bootstrap/react-bootstrap/issues/6741

Essentially, there isn't a designated way to do this officially (such as through parameter settings or styling). The workaround involves placing the label within a div inside the ProgressBar component.

For example:

<ProgressBar className="position-relative">
  <div className="position-absolute d-flex justify-content-center w-100 text-danger">25%</div>
  <ProgressBar striped variant="success" now={25} key={1} />
</ProgressBar>

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 design versatile div containers that combine the float property with fluid dimensions?

I am attempting to achieve a specific layout where the width of the content_container extends up to the right side of the screen and dynamically adjusts based on whether the expandable pane is collapsed or expanded. Applying width: 100% to .content_contain ...

javascripthtmljquerycss

HTML or JS/jQuery can create disorienting cursor behaviors

Is there a way to create a distorted or crooked mouse movement on a webpage, even though the user is moving the mouse normally? I'm exploring ways to simulate the experience of a Parkinson's or arthritic patient trying to navigate a web page wit ...

javascriptjqueryhtmlcss

Issue with sticky-navigation not functioning properly in conjunction with Bootstrap navbar

I'm struggling with getting the sticky-top function to work properly. To work around the issue, I ended up writing some messy javascript code, but I'm hoping someone might have a better idea. My goal is to have the element stick to the top of the ...

htmlcssbootstrap-4

Fixing the double firing of the onClick event when the "Enter Key" is pressed in material-ui (bug)

I am utilizing the cljs-react-material-ui library within my project sourced from re-frame. While working with a flat-button, I noticed that clicking on it triggers the :on-click event as expected. However, when I tab to focus on the button and then press ...

reactjseventsmaterial-uiclojurescriptre-frame

Issue with React Router causing blank page upon authentication verification

I'm new to React Router and I'm having trouble with implementing an authentication check when the app runs. I found a solution mentioned in this post: How to implement authenticated routes in React Router 4?. The idea is that if the user is logge ...

reactjsreact-router-v4

Instructions on utilizing clean-css with Node.js to process incoming requests

I need help finding a way to pipe request output into clean-css for minification and then return it as a response. The application I am working on is using restify framework. Here is an example of what I'm trying to accomplish: var url = "http://www ...

cssnode.jsrequestminifyclean-css

Transforming the unmanaged value state of Select into a controlled one by altering the component

I am currently working on creating an edit form to update data from a database based on its ID. Here is the code snippet I have been using: import React, {FormEvent, useEffect, useState} from "react"; import TextField from "@material ...

javascriptreactjstypescriptmaterial-ui

Testing the appearance of a React Snackbar using Cypress

My React web application communicates errors to users through the Snackbar component. While Snackbars typically do not automatically hide for accessibility reasons, I need them to hide after a certain amount of time using the autoHideDuration parameter (in ...

reactjsmaterial-uicypress

My Drop Down menu is not displaying the <a> in two lines, and I'm having trouble getting it to show correctly

Hello there! I've encountered an issue with my drop-down menu. The text within the <a> tags is too long to fit on a single line, and I'm struggling to make it display in two lines instead. I've been experimenting for the past couple o ...

htmlcss

Ways to adjust a column width to be equal to the full width

My HTML table has columns with fixed widths, except for one that I want to expand to fill the remaining space with a minimum width set. I attempted using width: auto, but it didn't achieve the desired result of filling the leftover space. ...

htmlcss

No specific path has been established for the key auths

I am currently working on a project that involves using react-native-router-flux for navigation. However, I am encountering an error. https://i.sstatic.net/vE1c9.png This is my Router setup: <Router navTransparent> <Lightbox> ...

javascriptreactjsreact-nativereact-native-router-flux

Is there a way to turn off the "swipe to navigate back" feature in Microsoft Edge using JavaScript or jQuery?

Working on a website that features horizontal object rotation. For instance, starting with the front view of an object followed by side, back, other side, and then back to the front. In this case, there are 24 images of an object, each taken at a 15 degre ...

javascriptjqueryioscssmicrosoft-edge

Tips on obtaining an SSL certificate for deploying a web application created using React

After successfully deploying my react web app to Heroku, I encountered an issue with SSL certificates when using a custom domain www.xfinitynet.net. The original Heroku URL uses https and has its own SSL certificate, but I needed the custom domain to als ...

reactjssslherokuhttpscertificate

When using React and Material UI, there seems to be an issue with the Popover component where calling `setAnchorEl(null)` on the onClose event does not properly

I am encountering an issue with a Popover (imported from MaterialUI) nested inside a MenuItem (also imported from MaterialUI). The open prop for the popover is set to the boolean value of anchorEl. The onClose function is supposed to handle setting anchorE ...

reactjstypescriptmaterial-uipopover

Gatsby Dazzling Graphic

I'm currently facing an issue with my Heroes component. const UniqueHero = styled.div` display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, #1f1f21 1%, #1f1f21 1%,rgba(25, 26, 27, 0) 100%) , url(${prop ...

javascriptreactjsimagegatsbyresponsive-images

Searching Algolia records with partial criteria filter

What is the best way to apply partial matching filtering in Algolia? For example, if we have a field called fruits with values 'apple' and 'banana' in Algolia. How can we create a filter that will return all records where the fruits fie ...

reactjsalgolia

Encountering an error with the barchart test case in my React code

Presented here is the code for a BarChart in React: BarChart.tsx import "chartjs-plugin-datalabels"; import { HorizontalBar } from "react-chartjs-2"; import styled from "styled-components"; import { BRAND } from "../uti ...

reactjsunit-testing

What is the best way to prevent card-group from wrapping on smaller screens?

What is the best way to ensure that cards in a card-group stay adjacent to each other on smaller screens? Currently, they are grouped together on larger screens but appear separated on smaller screens. I am currently hiding the additional cards on smaller ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-5

Having trouble sending messages on the server?

Programmer Seeking Help with Adding Data on the Server using JavaScript Stack I am encountering an issue with my javascript code as I am attempting to use the post method to add data on the server-side, but it seems to not be posting successfully. Can ...

javascripthtmlcssnode.jsexpress

Choosing a submenu with CSS

Hey everyone! I'm currently in the process of designing a WordPress template for my personal website, and I require assistance with creating a dropdown multilevel menu. So far, I have successfully configured WordPress to display the first submenu leve ...

htmlcsswordpress