CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user7271699
user7271699

Reputation:

Centering a bootstrap progress bar vertically with a Div?

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

enter image description here

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!

Upvotes: 2

Views: 6875

Answers (2)

Future Door Technology
Future Door Technology

Reputation: 7

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

Upvotes: -1

ab29007
ab29007

Reputation: 7766

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>

Upvotes: 6

Related Questions