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

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:

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

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

<!-- end snippet -->

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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);

<!-- language: lang-html -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/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/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<!-- end snippet -->

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/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>

<!-- end snippet -->