→ 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

1.8k

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 made with bootstrap 5.3

Author:
Anonymous

1 year ago

2.9k

v.5.3
Animated Skills Progress Chart

Author:
Reza Farhadi

1 year ago

4.8k

v.5.3
Progress bars
Progress bar variations

Author:
Reza Farhadi

1 year ago

1.3k

v.5.3
Default progress bar designs by boostrap css

Author:
Omar Khaled

1 year ago

2.5k

v.5.3
Minimal testimonial section
With user images

Author:
Noah Kim

1 year ago

4.4k

v.5.3
Steps section

Author:
Ankit khedkar

1 year ago

9.7k

v.5.3
Simple Login form

Author:
Prajwal Hallale

2 years ago

9.2k

v.5.3
Animated Pricing Card with Bootstrap 5

Author:
Reza Farhadi

1 year ago

1.1k

v.5.3
Product Card
A product card layout for an e-commerce website with an image at the top

Author:
Juan Martinez

1 year ago

18.1k

v.5.3
Product Card
Card diseñada para mostrar productos de forma atractiva y ordenada, inspirada en Mercado Libre. Incluye imagen fija, título uniforme, precio anterior tachado, precio actual con descuento y etiquetas promocionales como "Envío gratis". Incorpora un efecto hover con sombra acentuada y usa clases CSS para fácil integración y mantenimiento.

Author:
Facundo Banegaz

1 year ago

1.5k

v.4.6
Clean Modern Footer Design with Social Media
Elegant light-themed footer with interactive elements, newsletter signup, and social media integration built with Bootstrap 5.3.

Author:
Isaac Winslow

1 year ago

5.7k

v.5.3
contact us

Author:
java stories story

9 months ago

3k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent