→ Tane Mahuta
→ Progress bars

Progress bars

This bootstrap css example is contributed by Tane Mahuta, on 17-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Progress Bar

Author Tane Mahuta

398

v.5.3

Fork Fullscreen

<section class="progress-section py-5">
  <div class="container">
    <h2 class="text-center mb-5">Our Skills</h2>
    <div class="row">
      <div class="col-md-6 mb-4">
        <h5>Web Design</h5>
        <div class="progress" style="height: 10px;">
          <div class="progress-bar bg-primary" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <small class="text-muted">90% Complete</small>
      </div>
      <div class="col-md-6 mb-4">
        <h5>Graphic Design</h5>
        <div class="progress" style="height: 10px;">
          <div class="progress-bar bg-success" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <small class="text-muted">75% Complete</small>
      </div>
      <div class="col-md-6 mb-4">
        <h5>UI/UX Design</h5>
        <div class="progress" style="height: 10px;">
          <div class="progress-bar bg-info" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <small class="text-muted">80% Complete</small>
      </div>
      <div class="col-md-6 mb-4">
        <h5>Mobile App Development</h5>
        <div class="progress" style="height: 10px;">
          <div class="progress-bar bg-warning" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <small class="text-muted">85% Complete</small>
      </div>
    </div>
  </div>
</section>

More Examples

Progress bars
Progress bar variations

Author:
Reza Farhadi

6 months ago

331

v.5.3
Progress bars made with bootstrap 5.3

Author:
Anonymous

4 months ago

696

v.5.3
Default progress bar designs by boostrap css

Author:
Omar Khaled

6 months ago

1.2k

v.5.3
Animated Skills Progress Chart

Author:
Reza Farhadi

5 months ago

1.1k

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

5 months ago

558

v.4.6
Sign in with Google

Author:
Juan Martinez

7 months ago

2.2k

v.5.3
Minimal pricing cards

Author:
Sofia Petrova

7 months ago

398

v.5.3
Image gallery in bootstrap
Responsive Image gallery

Author:
Mateo Rojas

2 months ago

791

v.5.3
Blurry Loading
Blurry Loading

Author:
Rami AlAjo

6 days ago

79

v.4.6
Profile Management Dashboard
profile management interface with personal information, security settings, and activity tracking in a modern design

Author:
Shola Ajani

2 weeks ago

543

v.5.3
Error page template
Modern and clean 404-page template made with Bootstrap

Author:
Anonymous

2 months ago

1.3k

v.5.3
Auto-expanding Textarea

Author:
Anonymous

2 months ago

227

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent