Centering a bootstrap progress bar vertically with a Div?

Question

Hey so I have a progress bar that I want to be centered with a div object vertically. Here is a screenshot of what my current code looks like:

View of HTML Page

As you can see the progress bar is sitting at the top of the blue div. I need it to be sitting vertically centered to the div. Here is my code:

<div class="container">
            <div class="text-center">
                <div class="row">
                    <div class="col-xs-6" style="background-color: blue;">
                    <h2>Title goes here</h2>
                    <p>This is some text blah blah</p>
                    </div>
                    <div class="col-xs-6" >
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:29.17%">
                                -
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

If you know how to do this easily, I would love to know & any help is appreciated. Also, if I may have coded it wrong etc. Please let me know, I would love to learn!

This question has already been asked [**Here**](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — Mohammad Usman, Dec 27 '16 at 10:39
The CSS is normal the normal bootstrap.min.css, no changes were made & it's to big to paste it in here. — , Dec 27 '16 at 10:42
I'm not familiar with bootstrap but here's a great [centering guide](https://css-tricks.com/centering-css-complete-guide/) for future reference. — Hastig Zusammenstellen, Dec 27 '16 at 10:57

score 5 · Answer 1 · answered Dec 27 '16 at 10:43

Just add this simple css for row and div.progress

.row{
  display:flex;
  align-items:center;
}
div.progress{
  margin:0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
            <div class="text-center">
                <div class="row">
                    <div class="col-xs-6" style="background-color: blue;">
                    <h2>Title goes here</h2>
                    <p>This is some text blah blah</p>
                    </div>
                    <div class="col-xs-6" >
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:29.17%">
                                -
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I had this problem as well for Bootstrap 5 and this answer corrected it. This should be the accepted answer. — Daniel Rudy, Jul 23 '21 at 06:59

score -1 · Answer 2 · edited Dec 27 '16 at 10:53

.container { margin-top: 10px; }
    
    .progress-bar-vertical {
      width: 20px;
      min-height: 100px;
      display: flex;
      align-items: flex-end;
      margin-right: 20px;
      float: left;
    }

<div class="progress progress-bar-vertical">
     <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-         valuemin="0" aria-valuemax="100" style="height: 30%;">      
        <span class="sr-only">30% Complete</span>
     </div>
</div>

Centering a bootstrap progress bar vertically with a Div?

2 Answers2