→ DOLA AKTER
→ Skill information

Skill information

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

Tags: Banner

Author DOLA AKTER

256

v.4.6

Fork Fullscreen

<!doctype html>
<html lang="en">

<body>

<section id="Skills">
      <div class="container">
        <h2 class="section-title">My Skills</h2>
        <div class="row">
          <div class="col-lg-6">
            <div class="skill-item">
              <div class="skill-info">
                <h4>HTML</h4>
                <span>95%</span>
              </div>
              <div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25"
                aria-valuemin="0" aria-valuemax="100" style="height: 15px">
                <div class="progress-bar" style="width: 95%"></div>
              </div>
            </div>
            <div class="skill-item">
              <div class="skill-info">
                <h4>CSS</h4>
                <span>90%</span>
              </div>
              <div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25"
                aria-valuemin="0" aria-valuemax="100" style="height: 15px">
                <div class="progress-bar" style="width: 90%"></div>
              </div>
            </div>
            <div class="skill-item">
              <div class="skill-info">
                <h4>Javascript</h4>
                <span>60%</span>
              </div>
              <div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25"
                aria-valuemin="0" aria-valuemax="100" style="height: 15px">
                <div class="progress-bar" style="width: 60%"></div>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="skill-item">
              <div class="skill-info">
                <h4>Bootstrap</h4>
                <span>90%</span>
              </div>
              <div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25"
                aria-valuemin="0" aria-valuemax="100" style="height: 15px">
                <div class="progress-bar" style="width: 90%"></div>
              </div>
            </div>
            <div class="skill-item">
              <div class="skill-info">
                <h4>Tailwind</h4>
                <span>85%</span>
              </div>
              <div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25"
                aria-valuemin="0" aria-valuemax="100" style="height: 15px">
                <div class="progress-bar" style="width: 85%"></div>
              </div>
            </div>
            <div class="skill-item">
              <div class="skill-info">
                <h4>UI/UX Design</h4>
                <span>70%</span>
              </div>
              <div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25"
                aria-valuemin="0" aria-valuemax="100" style="height: 15px">
                <div class="progress-bar" style="width: 70%"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

</html>

More Examples

bootstrap modal with trainning
dont copy

Author:
Fitar Ahmed

2 months ago

273

v.4.6
Restaurant About Page

Author:
Creative Araf

3 weeks ago

83

v.5.3
special skill
dont copy

Author:
Fitar Ahmed

2 months ago

681

v.4.6
E-Commerce Full

Author:
Zahid Hasan Riyad

2 weeks ago

149

v.5.3
edu info
not copy

Author:
Fitar Ahmed

2 months ago

765

v.4.6
mission and vission
je copy korbe se chor

Author:
Fitar Ahmed

2 months ago

342

v.4.6
about page

Author:
lamiajahan

2 weeks ago

83

v.4.6
siam banner
banner section

Author:
MD Siam Miya

2 months ago

267

v.4.6
E-Commerce index

Author:
Creative Araf

1 month ago

180

v.5.3
Bootstrap 5 Example : Hero Section + 3 Columns
Bootstrap is the world's most famous free CSS framework.

Author:
ARAFAT

3 months ago

439

v.4.6
Carrousel banner product
It's a carousel; clicking on its categories opens a banner with the product.

Author:
Juan Antonio González Hernández

4 months ago

1.2k

v.5.3
personal info section
do not copy

Author:
Fitar Ahmed

2 months ago

292

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent