→ 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.1k

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

User Profile Card with Bootstrap
How to Use: Replace Image URL: Update the src attribute of the img tag to the actual URL of the user’s image. Update Text: Change the text inside the h5 and p elements to reflect the user’s actual name and biography

Author:
zobaidul kaziex

2 years ago

3.5k

v.4.6
Skills & Expertise

Author:
Shahriar Noyon

3 months ago

357

v.4.6
test

Author:
Anonymous

7 months ago

396

v.5.3
Our Clients Section

Author:
Shahriar Noyon

3 months ago

385

v.4.6
Work Experience Section

Author:
Tanvir fahad

4 months ago

483

v.4.6
Accordion

Author:
Anonymous

1 month ago

227

v.5.3
Service Page

Author:
Shahriar Noyon

3 months ago

306

v.4.6
Elon Musk 4
Service Page 4

Author:
RAHAT RAHMAN OFICIAL

4 months ago

301

v.4.6
serviceComplate

Author:
Sahin Miah

3 months ago

871

v.4.6
Responsive Card Grid
A responsive grid of cards with hover effects

Author:
Prajwal Hallale

2 years ago

8.2k

v.5.3
featured product

Author:
Juan Antonio González Hernández

6 months ago

722

v.4.6
About me section
je copy korbe she chor

Author:
Anonymous

4 months ago

1k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent