Twitter Bootstrap Question posted in

center progress-bar in Twitter Bootstrap

The progress bar, the blue shading, is left aligned, but I’d like it to be centered:

<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div class="progress">
   <div class="progress-bar progress-bar-primary text-center" style="width: 25%">25%</div>
</div>

<div class="progress text-center">
   <div class="progress-bar progress-bar-primary" style="width: 25%">25%</div>
</div>

<div class="progress" align="center">
   <div class="progress-bar progress-bar-primary" style="width: 25%">25%</div>
</div>

<div class="progress">
   <div align="center" class="progress-bar progress-bar-primary" style="width: 25%">25%</div>
</div>

<p>Come to think of it, this might work:</p>
<div class="progress pull-left" style="width:37.5%">&nbsp;</div>
<div class="progress">
   <div class="progress-bar progress-bar-primary" style="width: 25%">25%</div>
</div>
Tags:

2

Answers


  1. 0

    I think this could help you, to get what you want.

    Login or Signup to reply.
  2. 0

    Use Bootstrap’s “text-center” class

    <div class="progress">
  <div class="progress-bar progress-bar-primary text-center" style="width: 25%">25%</div> 
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search