→ Fitar Ahmed
→ skill section

skill section

do not copy please

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

Tags: Card

Author Fitar Ahmed

1.2k

v.4.6

Fork Fullscreen

<section class="py-5 bg-white">
    <div class="container">
        <div class="row align-items-center justify-content-between g-4">
            
            
            <div class="col-md-5">
                <span class="text-primary text-uppercase fw-bold tracking-wider small">My Expertise</span>
                <h2 class="display-5 fw-bold text-dark mt-1 mb-3">Skills & Capabilities</h2>
                <p class="lead text-muted mb-4">
                    I specialize in building clean, responsive, and high-performance user interfaces. Here is a breakdown of my technical proficiency and expertise levels.
                </p>
                <a href="#contact" class="btn btn-outline-primary px-4 py-2 fw-medium rounded-pill">Hire Me</a>
            </div>

<div class="col-md-6">
                <div class="skill-bars-container d-flex flex-column gap-4">
                    
                    
                    <div class="skill-item">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="fw-bold text-dark">HTML5 & Bootstrap 5</span>
                            <span class="fw-bold text-primary">95%</span>
                        </div>
                        <div class="progress rounded-pill" style="height: 10px;">
                            <div class="progress-bar bg-primary rounded-pill" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>

<div class="skill-item">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="fw-bold text-dark">CSS3 & Custom Styling</span>
                            <span class="fw-bold text-primary">85%</span>
                        </div>
                        <div class="progress rounded-pill" style="height: 10px;">
                            <div class="progress-bar bg-primary rounded-pill" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>

<div class="skill-item">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="fw-bold text-dark">JavaScript (ES6+)</span>
                            <span class="fw-bold text-primary">75%</span>
                        </div>
                        <div class="progress rounded-pill" style="height: 10px;">
                            <div class="progress-bar bg-primary rounded-pill" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>

<div class="skill-item">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="fw-bold text-dark">UI/UX Layout Design</span>
                            <span class="fw-bold text-primary">80%</span>
                        </div>
                        <div class="progress rounded-pill" style="height: 10px;">
                            <div class="progress-bar bg-primary rounded-pill" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>

</div>
            </div>

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

More Examples

PlantStore full website

Author:
Zahid Hasan Riyad

2 months ago

443

v.5.3
Special Skills

Author:
Shahriar Noyon

4 months ago

445

v.4.6
home page

Author:
lamiajahan

2 months ago

192

v.4.6
working

Author:
Gana JNsksk

4 months ago

315

v.4.6
Service Page

Author:
Shahriar Noyon

4 months ago

331

v.4.6
E-Commerce Full

Author:
Zahid Hasan Riyad

2 months ago

656

v.5.3
about page

Author:
lamiajahan

2 months ago

188

v.4.6
About me section
je copy korbe she chor

Author:
Anonymous

4 months ago

1.1k

v.4.6
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

1 year ago

4.1k

v.4.6
siam service list items section
saervice list

Author:
MD Siam Miya

4 months ago

319

v.4.6
E- Commarce full website

Author:
Zahid Hasan Riyad

2 months ago

426

v.5.3
test

Author:
Anonymous

7 months ago

428

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent