→ 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

310

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-com Cart Page

Author:
Creative Araf

2 months ago

106

v.5.3
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

2 years ago

3.7k

v.4.6
NewsPortal Full Website

Author:
Zahid Hasan Riyad

1 month ago

501

v.5.3
siam banner
banner section

Author:
MD Siam Miya

4 months ago

320

v.4.6
bootstrap modal with trainning
dont copy

Author:
Fitar Ahmed

4 months ago

328

v.4.6
Personal Portfolio Index

Author:
Creative Araf

2 months ago

242

v.5.3
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

1 month ago

377

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

Author:
ARAFAT

4 months ago

547

v.4.6
work ex
do not copy

Author:
Fitar Ahmed

4 months ago

702

v.4.6
about page

Author:
lamiajahan

2 months ago

149

v.4.6
portfolio

Author:
lamiajahan

2 months ago

150

v.4.6
E-Commerce Full

Author:
Zahid Hasan Riyad

1 month ago

514

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent