→ 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

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 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.4k

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

2.8k

v.4.6
work ex
do not copy

Author:
Fitar Ahmed

3 weeks ago

46

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

Author:
ARAFAT

1 month ago

123

v.4.6
bootstrap modal with trainning
dont copy

Author:
Fitar Ahmed

3 weeks ago

51

v.4.6
special skill
dont copy

Author:
Fitar Ahmed

3 weeks ago

41

v.4.6
scroll animation image with title

Author:
Juan Antonio González Hernández

3 months ago

519

v.4.6
personal info section
do not copy

Author:
Fitar Ahmed

3 weeks ago

45

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

2 months ago

445

v.5.3
edu info
not copy

Author:
Fitar Ahmed

3 weeks ago

44

v.4.6
siam banner
banner section

Author:
MD Siam Miya

3 weeks ago

66

v.4.6
mission and vission
je copy korbe se chor

Author:
Fitar Ahmed

3 weeks ago

63

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent