Centering a progress bar with and text in a footer with bootstrap

Question

I'm been trying to do this is many different ways: with flex box, table-cell, boot-strap, just html/css. But I am not being able to get in to the result I wish. I am not sure if I'm forgetting something really simple.

Here is two of my tries

What could be a solution to: center all the elements inside the footer (vertically and horizontally) and leave a nice space in the top and bottom (over the progress bar and under the text) between the elements and the footer border and between the elements themselves.

.footer style="position: fixed; left: 0; bottom: 0; width: 100%; background-color: #000000; text-align: center;"
  .col-md-12
    .progress style="height: 20px;"
      .progress-bar [
        role="progressbar"
        style="width:100%; background: #5bc0de;"
      ]
        span style="display: block; position: absolute; width: 98%; color: #FFFFFF; font-weight: bold;"
          div
            | 50/100%
  br
    span align="center" style="display: block; position: absolute; width: 100%; color: #FFFFFF;"
      | This is my text

Here is the code with Boostrap

.navbar.navbar-fixed-bottom.center style="background-color: #000000; text=align: center;"
  .container style="display:inline-block float:none"
    .row
      .col-md-12
        .progress style="background: #f382f234; height: 20px;"
          .progress-bar [
            role="progressbar"
            style="width:50%; background: #5bc0de;"
          ]
            span style="display: block; position: absolute; width: 98%; color: #FFFFFF; font-weight: bold;"
              div
                | 20/100
    .row
      .col-md-12 align="center"
        span style="display: block; position: absolute; width: 96%; color: #FFFFFF;"
          | This is the tex

I am not really sure if this kind of question should be posted here, so I'm sorry if it's misplaced.