→ Omar Khaled
→ Default progress bar designs by boostrap...

Default progress bar designs by boostrap css

This bootstrap css example is contributed by Omar Khaled, on 29-Aug-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Progress Bar

Author Omar Khaled

2.9k

v.5.3

Fork Fullscreen

<div class="container">
    
    <h5>Basic Progress Bar</h5>
    <div class="progress mb-3">
        <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0"
            aria-valuemax="100">50%</div>
    </div>

<h5>Colored Progress Bar</h5>
    <div class="progress mb-3">
        <div class="progress-bar bg-success" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0"
            aria-valuemax="100">75%</div>
    </div>

<h5>Striped Progress Bar</h5>
    <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%;" aria-valuenow="60"
            aria-valuemin="0" aria-valuemax="100">60%</div>
    </div>

<h5>Animated Striped Progress Bar</h5>
    <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar"
            style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
    </div>

<h5>Multiple Progress Bars</h5>
    <div class="progress mb-3">
        <div class="progress-bar bg-success" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0"
            aria-valuemax="100">30%</div>
        <div class="progress-bar bg-warning" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0"
            aria-valuemax="100">20%</div>
        <div class="progress-bar bg-danger" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0"
            aria-valuemax="100">10%</div>
    </div>
</div>

More Examples

Animated Skills Progress Chart

Author:
Reza Farhadi

2 years ago

5.7k

v.5.3
Progress bars
Progress bar variations

Author:
Reza Farhadi

2 years ago

1.6k

v.5.3
Progress bars

Author:
Tane Mahuta

2 years ago

2.6k

v.5.3
Skills & Expertise

Author:
Anonymous

3 months ago

216

v.4.6
Progress bars made with bootstrap 5.3

Author:
Anonymous

1 year ago

3.5k

v.5.3
Bootstrap Product Card

Author:
Anonymous

2 years ago

5.4k

v.5.3
slider section

Author:
Juan Antonio González Hernández

6 months ago

571

v.5.3
Personal Biography section
destra immagine e sinistra testo

Author:
Anonymous

4 months ago

495

v.5.3
Carousel part

Author:
istiakahmedchowdhury10

2 months ago

117

v.4.6
form

Author:
Ad Apon7

4 months ago

420

v.5.3
Boostrap Buttons
Basic Buttons - Standard button styles with different color variations Outline Buttons - Ghost buttons with colored borders that fill on hover Button Sizes - Three different size variations for different contexts Icon Buttons - Buttons with Bootstrap Icons integration Block Buttons - Full-width buttons using Bootstrap's grid system Button Groups - Grouped buttons for related actions Loading Buttons - Interactive buttons with loading spinners

Author:
Asmath

1 year ago

4.3k

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

2 years ago

4k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent