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

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