Question 45413 in Html Question posted in
Some basic documentation can be found here.

How can I display Bootstrap progress bar numbers under the bar? – Html

I am able to create progress bar with Bootstrap.

I want those numerical values to be displayed below the progress bar but not inside, something like this:

enter image description here

How can we achieve this? Do I need to use any JavaScript graphing libraries?

PS: Note that the main challenge I am facing is to show the numbers below divs, and not with color styling or calculating those numbers.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
Tags:

2

Answers


  1. 0

    One solution would be to add a div below yours and to use some JavaScript

    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]);
  //elements[i].innerHTML = count;

  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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    Login or Signup to reply.
  2. 0

    A little CSS whizbang and some pseudo-elements should do. Note that I wrapped the numeric values with spans for positioning. By giving the structure a custom class we can override Bootstrap’s styles without using !important, which makes work easier down the road and avoids styling all progress bars.

    Also note that Bootstrap provides classes for position, overflow, and border-radius, but I’ve put those things in the CSS for clarity. I did use border classes on the outer element.

    .progress.labels-out,
.progress.labels-out .progress-bar {
  position: relative; /* allows positioning of child elements */
  overflow: visible; /* lets the child elements be seen */
  border-radius: 0;
}

.progress.labels-out .progress-bar span,
.progress.labels-out::before,
.progress.labels-out::after {
  position: absolute;
  top: calc(100% + 5px); /* shift down the height of the parent plus a bit */
  left: 100%;
  transform: translateX(-50%); /* shift left half its own width to center */
  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/[email protected]/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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search