Suggested Video Tutorials
Part 31 - Bootstrap panels
Part 32 - Bootstrap well
Part 33 - Bootstrap labels and badges
In this video we will discuss the bootstrap progress bar component.
Progress bars are used for showing the progress of tasks such as downloading a file, software installation etc.
To create a progress bar, create 2 nested <div> elements with progress and progress-bar classes as shown below
To display the completed percentage on the progress bar, include the percentage in the inner div element.
To display low percentage values like 0%, 1% etc, make sure to include min-width style on the progress bar.
To create stripped progress bar add progress-bar-striped class along with progress-bar class on the inner <div> element.
To create progress bars with different colour schemes, use progress bar contextual classes
To create striped progress bars with different colour schemes, just add progress-bar-striped class
To create animated stripped progress bars just add active class along with progress-bar-striped class
To create a stacked progress bar, simply place the individual progress bars in a single div with class progress.
If you do not want the animation remove the active class and if you do not want stripes remove progress-bar-striped class
Part 31 - Bootstrap panels
Part 32 - Bootstrap well
Part 33 - Bootstrap labels and badges
In this video we will discuss the bootstrap progress bar component.
Progress bars are used for showing the progress of tasks such as downloading a file, software installation etc.
![bootstrap progress bar example](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV42gd5uaFlh5U7Nlp8Qe6doYHtUMs8PTSbEv9w8kiGHOT-bppZM3v7pxLzVF37kcuKfUgGCu0mkAur5zrSmtwKH7aMEdpPZjYt0UWd332o0Nr-TQ7rSWldmeVohW3fEO5irsx9L-CBpFq/s1600/bootstrap+progress+bar+example.png)
To create a progress bar, create 2 nested <div> elements with progress and progress-bar classes as shown below
<div class="progress">
<div class="progress-bar" style="width:70%;">
</div>
</div>
To display the completed percentage on the progress bar, include the percentage in the inner div element.
![bootstrap progress bar with percentage](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGD2g-QikKC2ghx2qnhl1kWD2C81IGJx6um3HLvmA8UoEJZT3u3n1O6ItkpCtjF2I4LzfBGQa5A6nn41PSpJF3epPWcPMI23INr7LdWKvFDt1iEeGJkZWPkzHaCG1yJQa5s073An8FvBMc/s1600/bootstrap+progress+bar+with+percentage.png)
<div class="progress">
<div class="progress-bar" style="width:70%;">
70%
</div>
</div>
To display low percentage values like 0%, 1% etc, make sure to include min-width style on the progress bar.
![bootstrap progress bar text cut off](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRbV3GEuWkBJXPUV8gTzFXeIF9xQL7sc-12aaLFZwL0XEgSLJIWLy6b1Nz0J51HB4n4HtpgWO-PUu7pE4-Zu5RnYmPRg3oPh-Drz0Ej47dI25ACo75qaZzBg5Nepo8YTGqU5pTDg8xJjSV/s1600/bootstrap+progress+bar+text+cut+off.png)
<div class="progress">
<div class="progress-bar" style="width:1%; min-width:20px">
1%
</div>
</div>
To create stripped progress bar add progress-bar-striped class along with progress-bar class on the inner <div> element.
![bootstrap progress bar striped](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrdu-J_tHJcO7B772rhwiruUYVopxk9vLG47eUCgIAEO-PKxZ4-Piw8d1_pCkb6suD2ZMHFXXlt7Q4zm1cNgKysKwwPJpq0NnakVPnonUIvwnsjSptzHeTOXTBOcdyVLktc0OYzQM4pmbL/s1600/bootstrap+progress+bar+striped.png)
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:80%;">
80%
</div>
</div>
To create progress bars with different colour schemes, use progress bar contextual classes
![bootstrap progress bar color change](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDdVUSLEE1kgtd3OaHuVtMoX4GIg5NoEwIjv0hwkRjaEeHTv_Im-BJrw12e7iEqMVXb5AX8SmSjOl7Tsw61F2NwyMTBgow5S4piKeE1gA0Wa1F25RULIkJJ-eAL4LFMi1FpbMTPnP827tY/s1600/bootstrap+progress+bar+color+change.png)
<div class="progress">
<div class="progress-bar
progress-bar-success" style="width:20%;">
20%
</div>
</div>
<div class="progress">
<div class="progress-bar
progress-bar-info" style="width:40%;">
40%
</div>
</div>
<div class="progress">
<div class="progress-bar
progress-bar-warning" style="width:60%;">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar
progress-bar-danger" style="width:80%;">
80%
</div>
</div>
To create striped progress bars with different colour schemes, just add progress-bar-striped class
![bootstrap striped progress bar color change](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTwYfK0H2ESWXIW3MX8myHriTm68bPpZ-TQneSbhL36mAjt0UCaQtskDEFPtnQKsIoLm0wgGAeX2q9kT_8WpaFXV7fpyQEYcSe_3ZCyqKo3HTPNgEJO-rr10VEh4PZVPb6nuAdOy_aGtjE/s1600/bootstrap+striped+progress+bar+color+change.png)
<div class="progress">
<div class="progress-bar
progress-bar-success progress-bar-striped" style="width:20%;">
20%
</div>
</div>
<div class="progress">
<div class="progress-bar
progress-bar-info progress-bar-striped" style="width:40%;">
40%
</div>
</div>
<div class="progress">
<div class="progress-bar
progress-bar-warning progress-bar-striped" style="width:60%;">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar
progress-bar-danger progress-bar-striped" style="width:80%;">
80%
</div>
</div>
To create animated stripped progress bars just add active class along with progress-bar-striped class
<div class="progress">
<div class="progress-bar
progress-bar-success progress-bar-striped active" style="width:20%;">
20%
</div>
</div>
<div class="progress">
<div class="progress-bar
progress-bar-info progress-bar-striped active" style="width:40%;">
40%
</div>
</div>
<div class="progress">
<div class="progress-bar
progress-bar-warning progress-bar-striped active" style="width:60%;">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar
progress-bar-danger progress-bar-striped active" style="width:80%;">
80%
</div>
</div>
To create a stacked progress bar, simply place the individual progress bars in a single div with class progress.
![bootstrap stacked progress bar](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9nv0bUAWKqUS96iMVIbb4GBrbDKmxYgBA_ji5TyQvjjmUhyphenhyphendI4qjl7WVYseLFacADQ7ItOVjPqGzuJuTqiJSf-uBEJMW6wh_oqBPIZGspv6NTVRLyMTLKvQEWY-Cjjw3mRh4REL5-bqo/s1600/bootstrap+stacked+progress+bar.png)
<div class="progress">
<div class="progress-bar
progress-bar-success progress-bar-striped active" style="width:25%;">
Login
</div>
<div class="progress-bar
progress-bar-info progress-bar-striped active" style="width:25%;">
Shipping
</div>
<div class="progress-bar
progress-bar-warning progress-bar-striped active" style="width:25%;">
Payment
</div>
</div>
If you do not want the animation remove the active class and if you do not want stripes remove progress-bar-striped class
![bootstrap tutorial for beginners](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_03fbnWvW2zvfwA1f2qr0lAcU_tqV-0TcxHuTxHR37oSpIKPhyQkmsA6Dv8POqdnRpxs-G76aI9MiZgnazPGmzB4mOukWlc-9BWjarWMee69te9QcFt2GyIGUnfweX_cDQh4Zf-cGvjJY/s1600/bootstrap+tutorial+for+beginners.png)
No comments:
Post a Comment
It would be great if you can help share these free resources