→ 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

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

my purpose

Author:
Gana JNsksk

3 weeks ago

65

v.4.6
certifications

Author:
Gana JNsksk

3 weeks ago

48

v.4.6
card

Author:
Awais Farman

5 months ago

425

v.5.3
Elon Musk 4
Service Page 4

Author:
RAHAT RAHMAN OFICIAL

3 weeks ago

53

v.4.6
Card Layout
Using masonry in cards layout

Author:
almounkez

1 year ago

4.5k

v.5.3
test

Author:
Anonymous

3 months ago

272

v.5.3
Work Experience Section

Author:
Tanvir fahad

3 weeks ago

75

v.4.6
Product Card
Card diseñada para mostrar productos de forma atractiva y ordenada, inspirada en Mercado Libre. Incluye imagen fija, título uniforme, precio anterior tachado, precio actual con descuento y etiquetas promocionales como "Envío gratis". Incorpora un efecto hover con sombra acentuada y usa clases CSS para fácil integración y mantenimiento.

Author:
Facundo Banegaz

1 year ago

1.5k

v.4.6
Our Clients Section

Author:
Shahriar Noyon

3 weeks ago

45

v.4.6
scroll animation image with title

Author:
Juan Antonio González Hernández

3 months ago

519

v.4.6
slider card product

Author:
Juan Antonio González Hernández

2 months ago

316

v.5.3
siam service list items section
saervice list

Author:
MD Siam Miya

3 weeks ago

57

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent