diff options
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 28 |
1 files changed, 28 insertions, 0 deletions
diff --git a/docs/components.html b/docs/components.html index efa8a0519..5780c4a31 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2280,6 +2280,34 @@ body { padding-bottom: 70px; } </div> {% endhighlight %} + <h3 id="progress-low-percentages">Low percentages</h3> + <p>Progress bars representing low single digit percentages, as well as 0%, include a <code>min-width: 20px;</code> for legibility.</p> + <div class="bs-example"> + <div class="progress"> + <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> + 0% + </div> + </div> + <div class="progress"> + <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;"> + 2% + </div> + </div> + </div> +{% highlight html %} +<div class="progress"> + <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> + 0% + </div> +</div> +<div class="progress"> + <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;"> + 2% + </div> +</div> +{% endhighlight %} + + <h3 id="progress-alternatives">Contextual alternatives</h3> <p>Progress bars use some of the same button and alert classes for consistent styles.</p> <div class="bs-example"> |