Post
Ask Question

Bootstrap - Progress Bars, Alert, Labels

Progress Bars

What is progress bar?
  • The purpose of progress bars is to show that assets are loading, in progress, or that there is action taking place regarding elements on the page.
  • These features are not supported in Internet Explorer 9 and below or older versions of Firefox.
  • Opera 12 does not support animations

Default Progress Bar

  • Use <div> tag with class of .progress
  • Inside the empty <div> tag to create another <div> tag with a class of .progress-bar
  • To define the style attributes with the width expressed as a percentage(for example style=”60%”)
  • That 60% indicates the progress bar level
Sample program for Default Progress Bar
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.     <div class="container">  
  10.         <div class="row">  
  11.           <h1 class="text-center page-header text-info">  
  12.           Bootstrap Progress Bar  
  13.           </h1>  
  14.             </div>  
  15.           <div class="row">  
  16.           <div class = "progress">  
  17.    <div class = "progress-bar" role = "progressbar" aria-valuenow = "60"   
  18.       aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">       
  19.       <span class = "sr-only">40% Complete</span>  
  20.    </div>  
  21. </div>  
  22.         </div>  
  23.      </div>  
  24.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  25.     <script type="text/css" src="js/jquery"></script>   
  26. </body>  
  27. </html>  

Output
Output

Colored Progress Bar 

There are four different colors using what is given below,

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger

Alternate Progress Bar

  • This alternative progress bar is used to  indicate different types in different style and various levels
  • Use <div> tag with class of .progress
  • Inside the empty <div> tag  create another <div> tag with a class of .progress-bar where could be success,info,warning,danger
  • To define the style attributes with the width expressed as a percentage(for example style=”60%”)
  • That 60% indicates the progress bar level

Sample program for alternate progress bar

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-info">  
  13.           Bootstrap Progress Bar  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row"> Alternateprogress-bar  
  17.             
  18.             
  19.           <div class = "progress">  
  20.    <div class = "progress-bar progress-bar-success"   
  21.       aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">  
  22.         
  23.       <span class = "sr-only">90% Complete (Sucess)</span>  
  24.    </div>  
  25. </div>  
  26.   
  27. <div class = "progress">  
  28.    <div class = "progress-bar progress-bar-info"    
  29.       aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">  
  30.         
  31.       <span class = "sr-only">30% Complete (info)</span>  
  32.    </div>  
  33. </div>  
  34.   
  35. <div class = "progress">  
  36.    <div class = "progress-bar progress-bar-warning"   
  37.       aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">  
  38.         
  39.       <span class = "sr-only">20%Complete (warning)</span>  
  40.    </div>  
  41. </div>  
  42.   
  43. <div class = "progress">  
  44.    <div class = "progress-bar progress-bar-danger"  
  45.    aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">  
  46.         
  47.       <span class = "sr-only">10% Complete (danger)</span>  
  48.    </div>  
  49. </div>  
  50.         </div>  
  51.      </div>  
  52.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  53.     <script type="text/css" src="js/jquery"></script>   
  54. </body>  
  55. </html>  

Output
Output

Striped Progress Bar

  • This striped progress bar is comes with zebra striper
  • If we have success,info,warning,danger color progress bars inside the progress bar zebra designed lines are generated
  • Thai is used for some advanced progress bars

Sample program for Striped Progress Bar

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>      
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-info">  
  13.           Bootstrap Progress Bar  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row"> Striped progress-bar  
  17.           <div class = "progress progress-striped">  
  18.    <div class = "progress-bar progress-bar-success"   
  19.       aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">  
  20.         
  21.       <span class = "sr-only">90% Complete (Sucess)</span>  
  22.    </div>  
  23. </div>  
  24.   
  25. <div class = "progress progress-striped">  
  26.    <div class = "progress-bar progress-bar-info"   
  27.       aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">  
  28.       <span class = "sr-only">30% Complete (info)</span>  
  29.    </div>  
  30. </div>  
  31. <div class = "progress progress-striped">  
  32.    <div class = "progress-bar progress-bar-warning"    
  33.       aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">  
  34.         
  35.       <span class = "sr-only">20%Complete (warning)</span>  
  36.    </div>  
  37. </div>  
  38. <div class = "progress progress-striped">  
  39.    <div class = "progress-bar progress-bar-danger" role = "progressbar"   
  40.       aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">  
  41.       <span class = "sr-only">10% Complete (danger)</span>  
  42.    </div>  
  43. </div>  
  44.         </div>  
  45.      </div>  
  46.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  47.     <script type="text/css" src="js/jquery"></script>   
  48. </body>  
  49. </html>  
 Output
Output 
Animated Progress Bar
  • This progress bar animates the strips from the right to left side
  • It looks like the strips are moving
  • The animated progress bar is continuously moving from the right to left side

Sample program for Animated Progress Bar

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.     <div class="container">  
  10.         <div class="row">  
  11.           <h1 class="text-center page-header text-info">  
  12.           Bootstrap Progress Bar  
  13.           </h1>  
  14.             </div>  
  15.           <div class="row"> Animated progress-bar     
  16.           <div class = "progress progress-striped active">  
  17.    <div class = "progress-bar progress-bar-success"   
  18.       aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">  
  19.       <span class = "sr-only">40% Complete</span>  
  20.    </div>  
  21. </div>  
  22.         </div>  
  23.      </div>  
  24.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  25.     <script type="text/css" src="js/jquery"></script>   
  26. </body>  
  27. </html>  
Output
Output 
Stacked Progress Bar
  • Stacked multiple progress bar
  • Place the multiple progress bars into the same .progress to stack
  • Single strip has multiple stacked bars

Sample program for stacked progress bar

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-info">  
  13.           Bootstrap Progress Bar  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row"> Stacked progress-bar  
  17.             
  18.             
  19.           <div class = "progress">  
  20.      
  21.    <div class = "progress-bar progress-bar-success"    
  22.       aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">  
  23.       <span class = "sr-only">40% Complete</span>  
  24.    </div>  
  25.    <div class = "progress-bar progress-bar-info"    
  26.       aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">  
  27.       <span class = "sr-only">30% Complete (info)</span>  
  28.    </div>  
  29.    <div class = "progress-bar progress-bar-warning"    
  30.       aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">  
  31.       <span class = "sr-only">20%Complete (warning)</span>  
  32.    </div>     
  33. </div>  
  34.   
  35.         </div>  
  36.      </div>  
  37.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  38.     <script type="text/css" src="js/jquery"></script>   
  39. </body>  
  40. </html>  
Output
Output

Bootstrap Alerts

  • Bootstrap provides an easy way to create predefined alert messages
  • Success - successful or positive action.
  • Info - neutral informative change or action.
  • Warning - warning that might need attention.
  • Danger - dangerous or potentially negative action.

Bootstrap Alerts classes

The alert creates the .alert class,

  • Alert-success
  • Alert-info
  • Alert-warning
  • Alert-danger

Sample program for bootstrap alert classes

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-info">  
  13.           Bootstrap Alert  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row">  
  17.       <div class="alert alert-success">  
  18.   <strong>Success-</strong> successful or positive action.  
  19. </div>  
  20. <div class="alert alert-info">  
  21.   <strong>Info-</strong> neutral informative change or action.  
  22. </div>  
  23. <div class="alert alert-warning">  
  24.   <strong>Warning-</strong>warning that might need attention.  
  25. </div>  
  26. <div class="alert alert-danger">  
  27.   <strong>Danger-</strong>dangerous or potentially negative action.  
  28. </div>  
  29.         </div>  
  30.      </div>  
  31.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  32.     <script type="text/css" src="js/jquery"></script>   
  33. </body>  
  34. </html>  
Output
Output 
Alert link
  • .alert-link to any links inside the alert box to create matching colored link
  • In the alert message a link is included

Sample program for alert link

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-info">  
  13.           Bootstrap Alert  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row">  
  17.             
  18.           <div class="alert alert-success">  
  19.   <strong>Success-</strong> You should <a href="#" class="alert-link">read this message</a>.  
  20. </div>  
  21. <div class="alert alert-info">  
  22.   <strong>info-</strong> You should <a href="#" class="alert-link">read this message</a>.  
  23. </div>  
  24.   
  25. <div class="alert alert-warning">  
  26.   <strong>Warning-</strong> You should <a href="#" class="alert-link">read this message</a>.  
  27. </div>  
  28.   
  29. <div class="alert alert-danger">  
  30.   <strong>Danger-</strong> You should <a href="#" class="alert-link">read this message</a>.  
  31. </div>  
  32.         </div>      
  33.      </div>  
  34. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  35.     <script type="text/css" src="js/jquery"></script>   
  36. </body>  
  37. </html>  
Output
Output 
Closing Alert
  • The right side of the alert container has X symbol 
  • .alert-dismissable class in to the alert container
  • Add class=”close” and data-dismiss=”alert” to a link or button element

Sample program for closing alert

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-info">  
  13.           Bootstrap Alert  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row">  
  17.             
  18.          Example  
  19. <div class="alert alert-success alert-dismissable">  
  20.   <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>  
  21.   <strong>Success!</strong> Indicates a successful or positive action.  
  22. </div>  
  23. </div>  
  24. </div>  
  25.   
  26.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  27.     <script type="text/css" src="js/jquery"></script>   
  28. </body>  
  29. </html>  
Output
Output

Animated alert
  • The X symbol to the right will ”fade” out
  • The .fade and .in class adds a fading effect when closing the alert message

Sample program for animated alert

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-info">  
  13.           Bootstrap Alert  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row">  
  17.             
  18.     <div class="alert alert-danger fade in">  
  19. </div>      
  20.      </div>  
  21.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  22.     <script type="text/css" src="js/jquery"></script>   
  23. </body>  
  24. </html>  
Output
Output 

Bootstrap Labels

  • Labels are used to provide additional information about something
  • Use .label class

Sample program for labels

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-info">  
  13.           Bootstrap Labels  
  14.           </h1>  
  15. <h1>Diamond<span class="label label-default">Stone</span></h1>  
  16. <h2>Gold <span class="label label-default">metal</span></h2>  
  17. <h3>Silver<span class="label label-default">metal</span></h3>  
  18. <h4>Platinum <span class="label label-default">metal</span></h4>  
  19. <h5>Pearl <span class="label label-default">non-metal</span></h5>  
  20. <h6>Ruby <span class="label label-default">metal</span></h6>  
  21.   
  22. </div>  
  23.      </div>  
  24.   
  25.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  26.     <script type="text/css" src="js/jquery"></script>   
  27. </body>  
  28. </html>  

Output
Output

Contextual label classes

There are six contextual label classes available which are given below with a span element to create a lable,

  • .label-default
  • .label-primary
  • .label-success
  • .label-info
  • .label-warning
  • .label-danger

Sample program for Contextual label classes

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-info">  
  13.           Bootstrap Labels  
  14.           </h1>  
  15. <span class="label label-default">Default</span>  
  16. <span class="label label-primary">Primary</span>  
  17. <span class="label label-success">Success</span>  
  18. <span class="label label-info">Info</span>  
  19. <span class="label label-warning">Warning</span>  
  20. <span class="label label-danger">Danger</span>  
  21. </div>  
  22.      </div>  
  23.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  24.     <script type="text/css" src="js/jquery"></script>   
  25. </body>  
  26. </html>  
Output
Output
 
These are the Sample programs and outputs for Labels

Conclusion

I hope now you can understand how to use and create the Bootstrap - Progress Bars, Alert, Labels. In the future we can learn about the Bootstrap techniques step by step. Stay tuned.


Similar Articles