How to Vertically Align a Progress Bar in Twitter Bootstrap

How to vertically align a progress bar in Twitter Bootstrap?

Bootstrap 2

Note this is a solution for bootstrap 2:

width 100%, height variable:

<br>
<div class="progress vertical">
  <div class="bar bar-success" style="height: 70%;width:100%"></div>
  <div class="bar bar-warning" style="height: 20%;width:100%"></div>
  <div class="bar bar-danger" style="height: 10%;width:100%"></div>
</div>

Bootstrap 3+

I'd like you to refer to the others comments on this page

Bootstrap 4 vertical alignment of progress bar

Vertical alignment is often a bit harder than simply using vertical-align: middle. In your particular case, you can position your progress bar by using position: absolute. You set it to 50% from top and 0 from left, and use transform to offset it by its own height. In this case the element will also need to set the elements width.

.progress{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
    width: 100%;
}

Bootstrap Css - vertically aligned progress bar with label

If I understand you correctly, the trick is to use width: 100vh; for .progress. In this way, the width of .progress will be the window's height so when you rotate it, it will take the full height.

Demo

html, body {

  height:100%;

  position:relative;

}

.verticalrotate {

  transform: rotate(-90deg);

  transform-origin: right top;

  -ms-transform: rotate(-90deg);

  -ms-transform-origin:right top;

  -webkit-transform: rotate(-90deg);

  -webkit-transform-origin:right top

}

.progress {

  width: 100vh;  

}

.amber {

  background-color:#ffb800 !important;

}

.green {

  background-color:#00ae3f !important;

}

.red {

  background-color:#ff2635 !important;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="progress verticalrotate">

   <div class="progress-bar green" role="progressbar" style="width:40%"></div>

   <div class="progress-bar amber" role="progressbar" style="width:10%"></div>

   <div class="progress-bar red" role="progressbar" style="width:20%"></div>

</div>

How to change the twitter bootstrap progressbar from horizontal to vertical

And finally i figured it out!

Changing the twitter bootstrap progress bar and animation from horizontal position to vertical position

---

---

HTML

<div class="progress progress-vertical progress-striped active progress-success">
    <div class="bar" style="width: 40px;"></div>
</div>
<div class="progress progress-vertical progress-striped active progress-danger">
    <div class="bar" style="width: 40px;"></div>
</div>

---

CSS

.progress-vertical {
position: relative;
width: 40px;
min-height: 240px;
float: left;
margin-right: 20px; }

---

Modify The Twitter bootstrap.css file as specified below:

        @-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 0 40px;
  }
  to {
    background-position: 0 0;
  }
}
@-moz-keyframes progress-bar-stripes {
  from {
    background-position: 0 40px;
  }
  to {
    background-position: 0 0;
  }
}
@-ms-keyframes progress-bar-stripes {
  from {
    background-position: 0 40px;
  }
  to {
    background-position: 0 0;
  }
}
@-o-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 40px;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 0 40px;
  }
  to {
    background-position: 0 0;
  }
}

---

Change background-repeat to repeat-y and the degrees to 0deg. so, that the animation renders vertically

    .progress-danger .bar,
    .progress .bar-danger {
      background-repeat: repeat-y;
      }

.progress-danger.progress-striped .bar,
.progress-striped .bar-danger {
  background-color: #ee5f5b;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

---

Follow the same with the other progress types like success,warning etc and achieve vertical twitter bootstrap progress bars and animations...!

For you have any queries let me know I may help you..!

If any one out there have any optimized solution than this then please let me know..!

Don't forget to support this solution..!

Enjoy!

Vertical align center text along with the progress bar

Just setting using margin-top

.progress-num {

  float: left;

  margin-right: 1em;

}

.progress {

    height: 0.5em !important;

    margin-top: 7px;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  <table class="table">

    <tr>

      <td>

        <span class="progress-num">8/10</span>

        <div class="progress">

        <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">

          <span class="sr-only"></span>

        </div>

      </div>

      </td>

    </tr>

  </table>

Align Progress Bar Bootstrap 4 (centered value) with button

Just Add vertical-align: middle; to the .progress-bar-size. You need to do this because your elements are inline-flex.

Demo Fiddle

How to align text vertically within bootstrap progress bar

One way to achieve vertical alignment of a single line of text is to make the line-height match the desired height.

Example: http://jsfiddle.net/VQS2k/

.progress {
    height: 40px;
    font-size: 30px;
}
.bar {
    font-size: 30px;
    line-height: 40px;
}

Plain version (no Bootstrap): http://jsfiddle.net/VQS2k/1/

Vertical Multiple Bootstrap Progress Bars

using the flex direction and setting it to 'column-reverse' is likely what you were looking for

.progress-bar-vertical{
    display: flex;
    flex-direction: column-reverse;
 }

Here is the full resource for flex
and here is a great 'cheatsheet'

body{

    padding: 45px;

}

  

.progress-bar-vertical{

    width: 35px;

    min-height: 286px;

    margin-right: 20px;

    border-radius: 10px !important;

    display: flex;

    flex-direction: column-reverse;

 }   

.progress-bar-vertical .progress-bar{

    width: 100%;

    height: 0;

    -webkit-transition: height 0.6s ease;

    -o-transition: height 0.6s ease;

    transition: height 0.6s ease;

    display:block;

 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="progress progress-bar-vertical">

    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%;">

        <span class="sr-only">60% Complete</span>

    </div>

    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 10%;">

        <span class="sr-only">10% Complete</span>

    </div>

    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 20%;">

        <span class="sr-only">20% Complete</span>

    </div>

</div>

---

Related Topics