Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap progress bar not working

bootstrap progress bar is not working on my mvc index view I have tried it with chrome and ie.

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
     <div class="progress-bar progress-striped "></div>
    </div>

</div>
like image 531
kobosh Avatar asked Mar 05 '14 00:03

kobosh


2 Answers

Late to this party, but in the version of Bootstrap I'm using (v3.1.1) the class was 'progress-striped' (not 'progress-bar-striped' like the Docs say) and both it and the 'active' class had to be applied to the outer div:

<div class="progress progress-striped active">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">Some text</div>
</div>
like image 154
Grim... Avatar answered Oct 08 '22 03:10

Grim...


<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

With this the progress animation will work.

like image 20
Ronel Kpossou Avatar answered Oct 08 '22 03:10

Ronel Kpossou