Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Progress bar with bootstrap

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 271
    Comment on it

    Welcome to Findnerd. Today we are going to learn the progressbar building with the help of bootstrap. We all knows the bootstrap uses different classes for different purposes so we will use the class named progress-bar, progress. Please have a look.

    <div class="progress">
    
        <div class="progress-bar" style="width: 40%;">
    
            40 percent
    
        </div>
    
    </div>
    

    It will show the currently process status on status bar. To show the striped progress bar then add the class progress-striped like this

    <div class="progress progress-striped">
    
            <div class="progress-bar" style="width: 40%;">
    
                40 percent
    
            </div>
    
        </div>
    

    You can show the multiples colors in one progress bar with this code

    <div class="progress">
    
        <div class="progress-bar progress-bar-success" style="width: 30%">
    
            <span class="sr-only">Main disk (40%)</span>
    
        </div>
    
        <div class="progress-bar progress-bar-warning" style="width: 45%">
    
            <span class="sr-only">Secondary disk (25%)</span>
    
        </div>
    
        <div class="progress-bar progress-bar-danger" style="width: 15%">
    
            <span class="sr-only">Random disk (15%)</span>
    
        </div>
    
    </div>
    

    It will show the progress bar for different targets. alt text

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: