→ Happy Khatun
→ Skill Section with Progress Bar

Skill Section with Progress Bar

This is a responsive skill section built with Bootstrap and external CSS. It shows different skills with progress bars like HTML, CSS, Bootstrap and JavaScript.

This bootstrap css example is contributed by Happy Khatun, on 15-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Card

Author Happy Khatun

v.4.6

Fork Fullscreen

<section class="py-5 bg-light">
    <div class="container">

<div class="text-center mb-5">
        <h2 class="fw-bold">My Skills</h2>
        <p class="text-muted">
          Here are some of my professional skills.
        </p>
      </div>

<div class="col-md-6">
          <h5>HTML</h5>
          <div class="progress">
            <div class="progress-bar html-skill">
              90%
            </div>
          </div>
        </div>

<div class="col-md-6">
          <h5>CSS</h5>
          <div class="progress">
            <div class="css-skill progress-bar" >
              85%
            </div>
          </div>
        </div>

<div class="col-md-6">
          <h5>Bootstrap</h5>
          <div class="progress">
            <div class="progress-bar bootstrap-skill" >
              80%
            </div>
          </div>
        </div>

<div class="col-md-6">
          <h5>JavaScript</h5>
          <div class="progress">
            <div class="progress-bar bg-danger js-skill">
              70%
            </div>
          </div>
        </div>

</div>
    </div>
  </section>

More Examples