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>
  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
  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%;">
  23. <span class = "sr-only">90% Complete (Sucess)</span>
  24. </div>
  25. </div>
  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%;">
  31. <span class = "sr-only">30% Complete (info)</span>
  32. </div>
  33. </div>
  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%;">
  39. <span class = "sr-only">20%Complete (warning)</span>
  40. </div>
  41. </div>
  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%;">
  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>
  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%;">
  21. <span class = "sr-only">90% Complete (Sucess)</span>
  22. </div>
  23. </div>
  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%;">
  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>
  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
  19. <div class = "progress">
  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>
  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>
  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>
  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">
  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>
  25. <div class="alert alert-warning">
  26. <strong>Warning-</strong> You should <a href="#" class="alert-link">read this message</a>.
  27. </div>
  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>
  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">
  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>
  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>
  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">
  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>
  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>
  22. </div>
  23. </div>
  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>
  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.