Is there a way to center the text at 0% using text-align in Bootstrap?

My progress bar, designed with Bootstrap, currently displays the text in a way that is not centered as desired.

The issue I am experiencing is that the "0/0" text shifts to the left and using text-align: center; does not seem to resolve this alignment problem.

Interestingly enough, instead of showing "0/0", only "0" appears on the progress bar. However, when checking the console, it indicates that "0/0" is present.

Does anyone have any suggestions for fixing this so that the "0/0" text appears in the center?

https://i.sstatic.net/BP2VM.png

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-center">
  <div class="col-xs-1">☚ī¸</div>
  <div class="col-xs-8">
    <div class="progress">
      <div class="progress-bar progress-bar-success" role="progressbar" style="width: test_number_percentage" aria- valuenow="test_number_percentage" aria-valuemin="0" aria-valuemax="7">
        0 / 7
      </div>
    </div>
  </div>
  <div class="col-xs-1" style="padding-left: 0;">😀</div>
</div>

test_number percentage is equal to 0% if 0 or 100% if 7 test_number is either 0 or 7 depending on the bar.

htmlcsstwitter-bootstrap

Answer №1

I trust this will be of assistance to you:

.left {
      padding-right: 0;
      text-align: right;
    }
    .right{
      padding-left: 0;
    }
    .justify-content-center {
      margin-top: 20px;
    }
    .progress{
      margin-bottom: 0;
      color:black;
      text-align: center;
      position: relative;
    }
    .progress_text {
      position: absolute;
      left: 0;
      right: 0;
      color: #fff;
      z-index: 1;  
    }
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
    <div class="row justify-content-center">
        <div class="col-xs-2 left">
            <img src="https://image.ibb.co/dw0DAG/sad.png" />
        </div>
        <div class="col-xs-8">
            <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" style="width: calc(test_number*100%/7)" aria- valuenow="test_number" aria-valuemin="0" aria-valuemax="7">
                </div>
                <span class="progress_text">test_number / 7</span>
            </div>
        </div>
        <div class="col-xs-2 right">
            <img src="https://image.ibb.co/eonoub/happy.png" />
        </div>
    </div>
</body>

And when you hit the mark with 7 out of 7, it will display as follows: 

    .left {
      padding-right: 0;
      text-align: right;
    }
    .right{
      padding-left: 0;
    }
    .justify-content-center {
      margin-top: 20px;
    }
    .progress{
      margin-bottom: 0;
      color:black;
      text-align: center;
      position: relative;
    }
    .progress_text {
      position: absolute;
      left: 0;
      right: 0;
      color: #fff;
      z-index: 1;  
    }
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="row justify-content-center">
       <div class="col-xs-2 left">
          <img src="https://image.ibb.co/dw0DAG/sad.png" />
       </div>
       <div class="col-xs-8">
          <div class="progress">
             <div class="progress-bar progress-bar-success" 
                role="progressbar" style="width: calc(7*100%/7)" aria-
                valuenow="7" aria-valuemin="0" aria-valuemax="7">
             </div>
                <span class="progress_text">7 / 7</span>
          </div>
       </div>
       <div class="col-xs-2 right">
          <img src="https://image.ibb.co/eonoub/happy.png" />
       </div>
    </div>
</body>

Answer №2

Ensure to place the text in the progress div instead of inside the progress-bar div.

<div class="row justify-content-center">
   <div class="col-xs-1">☚ī¸</div>
   <div class="col-xs-8">
      <div class="progress">
         <div class="progress-bar progress-bar-success" 
            role="progressbar" style="width: test_number" aria-
            valuenow="test_number" aria-valuemin="0" aria-valuemax="7">
         </div>
            test_number / 7
      </div>
   </div>
   <div class="col-xs-1" style="padding-left: 0;">😀</div>
</div>

https://jsfiddle.net/99azq2ay/1/

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

The picture is unavailable for inline viewing

I am currently working with bootstrap and I have a requirement to show an image followed by some text. However, despite having enough space after the image, the text keeps getting pushed to the next line. Below is my code: <div class="splash"> < ...

csstwitter-bootstrapinline

Difficulty encountered in closing div by clicking the background with the help of jquery

I am facing a challenge with properly closing a div container and restoring it to its original state when I click outside of it. Despite trying various solutions from stackoverflow and extensive internet research, I have been unable to find or come up with ...

javascriptjqueryhtmlcssweb

Interact with an external JavaScript function using a button within a web application

I have a JavaScript file called dmreboot_service.js in my /js folder. By running this file with the command node /js/dmreboot_service.js, it successfully triggers a direct method in Azure. My goal is to be able to run this function or file when a button o ...

javascriptjqueryhtmlnode.jsazure-iot-hub-device-management

Providing an HTML application even in the absence of an internet connection

I am currently developing an application that needs to function offline. I have experimented with the HTML5 manifest feature, which is now considered deprecated, and have also explored using 'Service Workers'. However, my challenge is that the ap ...

phphtml

Are there any jQuery plugins available that can display a loader image while a page is loading?

After extensive research on Google, I have been unable to find the plugin I need. If you are aware of any suitable plugins, please let me know. Thank you in advance! ...

javascriptjqueryhtml

Can someone help me locate the selector for using .click in Nightmare.js?

I am currently using Nightmare.js to automate the scraping of a webpage. As a sysadmin, my understanding of Node.js and CSS is limited. So far, I have been able to successfully use Nightmare to input and click on certain buttons in order to log in. I iden ...

cssnode.jsnightmare

Struggling to make css selector acknowledge the margins on the right and left

I am trying to style two inner divs within a containing div by floating the first one to the left and the second one to the right. Additionally, I want to add a margin of 15px on the left for the first div and on the right for the second div. The challenge ...

htmlcss

The chosenValues.filter method hit an unexpected token; a comma was anticipated

I have encountered a syntax error in the following line: queryComponents: prevState.seletedValues.filter((a, i) => (i !== index)); I am attempting to swap out splice with filter. I've attempted modifying brackets, both adding and removing them, b ...

javascripthtmlreactjsreduxmaterial-ui

What is the method to define the maximum width for a BootstrapTable while also trimming any data that exceeds this specified width?

In my ASP.NET Web Forms project, I am utilizing Bootstrap 5.2 for a BootstrapTable, which is currently defined as follows: <table class="display table table-bordered table-striped w-100 tables" ...

cssasp.netbootstrap-5bootstrap-table

Creating an HTML form that resembles StackOverflow's form

I am having an issue with the behavior of my form when inserting multiple tags. I want it to function like the one on this particular website where a scroll bar appears and a new line is created. Is there a way to keep everything on the same row? Check ou ...

javascriptjqueryhtmlcss

Arranging h1 tags within a container id

Seeking assistance with aligning specific classes in a certain way: "left" should align to the left part of #header, "links" should be centered, and "right" should align to the right of #header. Additionally, I want the icons to align vertically with the t ...

htmlcssalignment

How can validation of input fields be implemented in React Js?

Currently, I am dealing with a variable (in my actual application it is an API) named data, which contains nested items. Starting from the first level, it includes a title that is already displayed and then an array called sublevel, which comprises multip ...

javascripthtmlreactjsformsvalidation

Press the button to automatically scroll to a designated div section

One of the challenges I'm facing involves a fixed menu and content box (div) on a webpage. Whenever I click on the menu, the content box should scroll to a specific div. Initially, everything was working fine. Here is a sample of it in action: http ...

javascriptjqueryhtmlcss

Could the quantity of JavaScript files impact the performance of a project and cause any delays?

In my current HTML and JavaScript project, I am incorporating multiple JavaScript files. I'm curious to learn about the potential impact of having numerous JavaScript files on a web project's efficiency and speed. Can anyone shed some light on th ...

javascripthtmlclient-side

The JSON ticker for BTC/LTC has stopped functioning

I've been relying on this JSON ticker for the past month and it's been smooth sailing. However, today it suddenly stopped working. Any ideas on what might have caused this issue? $(function () { startRefresh(); }); function startRefresh() { ...

javascriptjqueryhtmljsonbitcoin

How to create a bottom border in several TD elements using a combination of CSS and jQuery

Check out my Website: Search Page I have written some CSS that functions well when searching by Name, but not by Specialty: .displayresult { display: block; } #fname, #lname, #splabel, #addlabel, #pnlabel { border-width: 4px; border-bottom-st ...

jquerycss

Looking to clean up unnecessary <b></b> tags from my Wordpress website - how can I do this?

One of my sites is located at . When inspecting the source code through the browser, I noticed the presence of empty tags. Does anyone know why these empty tags are being generated and how they can be removed? I have thoroughly searched through all files ...

javascriptphphtmlcsswordpress

Disabling caching in bootstrap tabs for loading ajax content

My goal is to make bootstrap tabs load content through ajax queries. While this process is straightforward with Jquery tabs, which default to loading content via ajax query, it seems to be a different case for bootstrap. As such, I have come across the fo ...

javascriptjqueryajaxtwitter-bootstrap

Cross-platform streaming video player that supports avi and asf files and can be easily embedded into any website

Can you recommend a video player that has the capability to: Stream videos stored on a server Be compatible with multiple browsers, and provide a fallback option if needed Work seamlessly across Android and iOS mobile devices? ...

c#asp.nethtmlvideo-streaming

Utilizing BeautifulSoup in Python to Retrieve Content Enclosed by Header Tags

Exploring ways to retrieve the storyline of a movie from its Wikipedia page using Python and BeautifulSoup, as I'm still getting acquainted with the whole process. The following contains the initial code snippet. <h2><span class="mw-headlin ...

pythonhtmlweb-scrapingbeautifulsoup