1.

Can a Progress Bar be created with different colors?

Answer»

Yes, we can easily create a Progress Bar with DIFFERENT colors using the contextual classes. The following are the contextual classes available for Progress Bar in Bootstrap:

  • .progress-bar-success: Indicates success or positive action for a Progress Bar (Green)
  • .progress-bar-info: Indicates informative action
  • .progress-bar-warning: Indicate warning action (Orange)
  • .progress-bar-danger: Indicates danger action (Red)

For our example, let us create a green colored Progress Bar:

<div class="progress">   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80"   aria-valuemin="0" aria-valuemax="100" style="width:80%">     <span class="sr-only">80%</span>   </div> </div>

The above displays the following green colored Progress Bar:

Let us now create multiple Progress BARS with different colors. Here, we are displaying information about an app based on its PERFORMANCE, crashes and errors. For all this information, we have used three Progress Bars:

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <META charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>App Information</h1>   <h2>App Performance</h2>   <div class="progress">     <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90"   aria-valuemin="0" aria-valuemax="100" style="width:90%">       90%     </div>   </div>   <h2>App Crashes</h2>   <div class="progress">     <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10"   aria-valuemin="0" aria-valuemax="100" style="width:10%">       10%     </div>   </div>   <h2>App Errors</h2>   <div class="progress">     <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20"   aria-valuemin="0" aria-valuemax="100" style="width:20%">       20%     </div>   </div> </div> </body> </html>

The output displays Progress Bars with different colors:


Discussion

No Comment Found

Related InterviewSolutions