→ 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

286

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

E-Commerce index

Author:
Creative Araf

2 months ago

243

v.5.3
B- Bootstrap homepage with background color, hover effects, animations, and shadows added to enhance the design
B-Features Added: Background Gradient: A smooth gradient background using linear-gradient. Card Shadow and Hover Effect: The card now lifts up with a shadow (box-shadow) and smooth transition (transform) on hover. Button Customization: A custom round button with hover color change. Animation: The card content animates with a "fade-in-up" effect using keyframe animation.

Author:
Bhavik Shah

1 year ago

3.2k

v.4.6
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

1 month ago

204

v.5.3
edu info
not copy

Author:
Fitar Ahmed

3 months ago

799

v.4.6
personal info section
do not copy

Author:
Fitar Ahmed

3 months ago

327

v.4.6
portfolio page

Author:
Md. Hasibur Rahman

1 month ago

149

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

5 months ago

1.3k

v.5.3
special skill
dont copy

Author:
Fitar Ahmed

3 months ago

713

v.4.6
scroll animation image with title

Author:
Juan Antonio González Hernández

6 months ago

947

v.4.6
contact

Author:
lamiajahan

1 month ago

96

v.4.6
Bootstrap homepage with background color, hover effects, animations, and shadows added to enhance the design
Features Added: Background Gradient: A smooth gradient background using linear-gradient. Card Shadow and Hover Effect: The card now lifts up with a shadow (box-shadow) and smooth transition (transform) on hover. Button Customization: A custom round button with hover color change. Animation: The card content animates with a "fade-in-up" effect using keyframe animation.

Author:
zobaidul kaziex

1 year ago

3.7k

v.4.6
Coffee website
coffee website

Author:
Faysal

1 month ago

130

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent