×

Html & Html5

The World's best Software Development Study Portal

Bootstrap Progress bars


Progress bars means how much the current process is done . And we use .progress-bar class for it.
Let’s understand by the basic progress bars:-


Basic Progress bars

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container-fluid">

<h2>Basic Progress Bar</h2>

<div class="progress">

<div class="progress-bar" style="width:70%"></div>

</div>

</div>

</body>

</html>

Output of this Program


Basic Progress Bar

So here the progress bar we had created .



Colored Progress Bars


We can add background color to our progress bars.
Let’s understand them by this program :-


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container-fluid">

<h2>Colored Progress Bars</h2>

<div class="progress">

<div class="progress-bar" style="width:10%"></div>

</div>

<div class="progress">

<div class="progress-bar bg-success" style="width:20%"></div>

</div>

<div class="progress">

<div class="progress-bar bg-info" style="width:30%"></div>

</div>

<div class="progress">

<div class="progress-bar bg-warning" style="width:40%"></div>

</div>

<div class="progress">

<div class="progress-bar bg-danger" style="width:50%"></div>

</div>

<div class="progress">

<div class="progress-bar bg-white" style="width:60%"></div>

</div>

<div class="progress">

<div class="progress-bar bg-secondary" style="width:70%"></div>

</div>

<div class="progress">

<div class="progress-bar bg-light" style="width:80%"></div>

</div>

<div class="progress">

<div class="progress-bar bg-dark" style="width:90%"></div>

</div>

</div>

</body>

</html>

Output of this Program


Colored Progress Bars

Animated Progress Bar

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container">

<h2>Animated Progress Bar</h2>

<p>Add the .progress-bar-animated class to animate the progress bar:</p>

<div class="progress">

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

</div>

</div>

</body>

</html>

Output of this Program


Animated Progress Bar

Add the .progress-bar-animated class to animate the progress bar:

Here we changes the background color of our progress bars.



Multiple Progress Bars


We can also show multiple progress bars together with different color.
Let’s understand them by this program :-


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container-fluid">

<h2>Multiple Progress Bars </h2>

<p>People taking tea </p>

<div class="progress">

<div class="progress-bar bg-success" style="width:40%">

Uttarakhand </div>

<div class="progress-bar bg-warning" style="width:40%">

Haryana </div>

<div class="progress-bar bg-danger" style="width:40%">

Delhi </div>

</div>

</div>

</body>

</html>

Output of this Program


Multiple Progress Bars

People taking tea

Uttarakhand
Haryana
Delhi

So here we just created multiple progress together.





Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute