→ 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

683

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

6 months ago

1.2k

v.5.3
Progress bars
Progress bar variations

Author:
Reza Farhadi

8 months ago

488

v.5.3
Default progress bar designs by boostrap css

Author:
Omar Khaled

8 months ago

1.4k

v.5.3
Animated Skills Progress Chart

Author:
Reza Farhadi

8 months ago

1.9k

v.5.3
Elegant Bootstrap Footer
with social media icons, newsletter forms, and other important links

Author:
Mateo Rojas

4 months ago

1.4k

v.5.3
User Profile Card with Social Icons using Bootstrap 5 (without connect button)

Author:
Ranadhir Debnath

1 month ago

546

v.5.3
Bootstrap 5 shopping cart design
clean and beautiful shopping cart component

Author:
Valeria González

5 months ago

2.2k

v.5.3
Interactive Right-Side Menu
A sleek and responsive right sidebar featuring user profile, navigation, and activity feed with modern design elements

Author:
Mason Ashford

5 months ago

3.8k

v.5.3
Coming Soon Page
Coming Soon landing page example made with Bootstrap 5

Author:
Maria Garcia

9 months ago

575

v.5.3
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
Anonymous

3 months ago

1.5k

v.5.3
Notification alert
notification alert bootstrapt 5.3 # alert-imessage Alert message custom on bootstrap 5.3 # Example calls JS // imessage.show("Default Success!", "success"); // imessage.show("Top Center Message!", "info", "top-center"); // imessage.show("Bottom Right Warning!", "warning", "bottom-right"); // imessage.show("Bottom Left Error!", "fail", "bottom-left"); // imessage.show("Centered Notification!", "info", "center");

Author:
StarCode Kh

2 months ago

557

v.5.3
bootstrap quiz template (Interactive)
Interactive MCQ Quiz show results at the end

Author:
Arturo

4 months ago

1.6k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent