What is the best way to present progress bar numbers in Bootstrap beneath the bar?

Question

What is the best way to present progress bar numbers in Bootstrap beneath the bar?

I have successfully implemented a progress bar using Bootstrap.

Now, I am looking to display numerical values below the progress bar, similar to this:

https://i.sstatic.net/3QG8d.png

Is there a way to achieve this without utilizing JavaScript graphing libraries?

My main issue is figuring out how to show the numbers below the divs, without the need for color styling or manual calculation.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4969b9b808780869584b4c0dac2dac6">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container pt-4">
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%;">
      15
    </div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%;">
      45
    </div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%;">
      65
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8dad7d7cccbcccad9c8f88c968e968a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

javascript html css twitter-bootstrap

Answer 1

Answer №1

To create a solution, you can insert a new div element below yours and utilize JavaScript for the functionality:

var elements = document.getElementsByClassName('progress-bar');
var count = 0;
var values = document.getElementById('values');
var value = document.createElement('div');
value.innerHTML = "0";
value.style.width = (parseInt(elements[0].style.width.split('%')[0]) - 1.6) + "%"
values.appendChild(value);

for (var i = 0; i < elements.length; i++) {
  count += parseInt(elements[i].style.width.split('%')[0]);

  var value = document.createElement('div');
  value.innerHTML = count;

  if (i < elements.length - 1)
    value.style.width = parseInt(elements[i + 1].style.width.split('%')[0]) + "%"
  else
    value.style.width = (100 - count - 4) + "%";
  values.appendChild(value);
}
var value = document.createElement('div');
value.innerHTML = "100";
values.appendChild(value);

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="197b76766d6a6d6b7869592c372b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />

<div class="container">
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%;"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%;"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%;"></div>
  </div>
  <div id="values" style="display: flex; flex-flow: row wrap;"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706c706d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Answer 2

To create a solution, you can insert a new div element below yours and utilize JavaScript for the functionality:

var elements = document.getElementsByClassName('progress-bar');
var count = 0;
var values = document.getElementById('values');
var value = document.createElement('div');
value.innerHTML = "0";
value.style.width = (parseInt(elements[0].style.width.split('%')[0]) - 1.6) + "%"
values.appendChild(value);

for (var i = 0; i < elements.length; i++) {
  count += parseInt(elements[i].style.width.split('%')[0]);

  var value = document.createElement('div');
  value.innerHTML = count;

  if (i < elements.length - 1)
    value.style.width = parseInt(elements[i + 1].style.width.split('%')[0]) + "%"
  else
    value.style.width = (100 - count - 4) + "%";
  values.appendChild(value);
}
var value = document.createElement('div');
value.innerHTML = "100";
values.appendChild(value);

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="197b76766d6a6d6b7869592c372b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />

<div class="container">
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%;"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%;"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%;"></div>
  </div>
  <div id="values" style="display: flex; flex-flow: row wrap;"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706c706d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Answer 3

Answer №2

To add some visual flair to your CSS, consider incorporating pseudo-elements. I've enclosed the numerical values in spans for precise positioning. By assigning a custom class to the structure, it's possible to overwrite Bootstrap's styles without resorting to !important, simplifying future modifications and preventing the need to restyle all progress bars.

It's worth mentioning that Bootstrap offers classes for positioning, overflow, and border-radius, but I've opted to define these attributes in the CSS for better clarity. However, I have applied border classes to the outer element for consistency.

.progress.labels-out,
.progress.labels-out .progress-bar {
  position: relative; /* enables child element positioning */
  overflow: visible; /* ensures child elements are visible */
  border-radius: 0;
}

.progress.labels-out .progress-bar span,
.progress.labels-out::before,
.progress.labels-out::after {
  position: absolute;
  top: calc(100% + 5px); /* shifts downwards by parent height plus a margin */
  left: 100%;
  transform: translateX(-50%); /* centers by shifting left half of its width */
  color: #000;
  font-weight: bold;
}

.progress.labels-out::before {
  content: '100';
}

.progress.labels-out::after {
  content: '0';
  left: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba6a6bdbabdbba8b989fce7fbe7fa">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container pt-4">
  <div class="progress labels-out border border-2">
    <div class="progress-bar" role="progressbar" style="width: 15%;">
      <span>15</span>
    </div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%;">
      <span>45</span>
    </div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%;">
      <span>65</span>
    </div>
  </div>
</div>

Answer 4

To add some visual flair to your CSS, consider incorporating pseudo-elements. I've enclosed the numerical values in spans for precise positioning. By assigning a custom class to the structure, it's possible to overwrite Bootstrap's styles without resorting to !important, simplifying future modifications and preventing the need to restyle all progress bars.

It's worth mentioning that Bootstrap offers classes for positioning, overflow, and border-radius, but I've opted to define these attributes in the CSS for better clarity. However, I have applied border classes to the outer element for consistency.

.progress.labels-out,
.progress.labels-out .progress-bar {
  position: relative; /* enables child element positioning */
  overflow: visible; /* ensures child elements are visible */
  border-radius: 0;
}

.progress.labels-out .progress-bar span,
.progress.labels-out::before,
.progress.labels-out::after {
  position: absolute;
  top: calc(100% + 5px); /* shifts downwards by parent height plus a margin */
  left: 100%;
  transform: translateX(-50%); /* centers by shifting left half of its width */
  color: #000;
  font-weight: bold;
}

.progress.labels-out::before {
  content: '100';
}

.progress.labels-out::after {
  content: '0';
  left: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba6a6bdbabdbba8b989fce7fbe7fa">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container pt-4">
  <div class="progress labels-out border border-2">
    <div class="progress-bar" role="progressbar" style="width: 15%;">
      <span>15</span>
    </div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%;">
      <span>45</span>
    </div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%;">
      <span>65</span>
    </div>
  </div>
</div>

What is the best way to present progress bar numbers in Bootstrap beneath the bar?

Answer №1

Answer №2

Similar questions

Sending formdata containing a file and variables via $.ajax

To use the ModuleWithProviders<T> in the angular-autofocus-fix package, you must provide 1 type argument

Incorporating a new row in JQuery Datatable using an mdata array

The response parser in Angular 7 is failing to function correctly

Steps for updating images and text on a live webpage after launching the web application

React function failing to utilize the latest state

React - Page Loads with Empty Query Parameters

storage location for data in JSON format

Building a loading spinner component in a react-native project

The template in AngularJS route fails to display

Using focusout and clicking buttons do not effectively interact with child elements

Stylist in Visual Studio Code for React applications

React component fails to re-render after state change

The scroll bar is visible on the scroll box, but unfortunately it is not functional in Internet Explorer 8

No data found on Angular TypeScript page with an empty array

Creating a dynamic table with columns of fixed width in Angular on the fly

Tips for handling arguments in functional components within React applications

What could be causing the child view to not display the AJAX result?

my initial attempt at using Firebase cloud functions

Using various Content-Types within a single path with Serverless Next JS