→ Gana JNsksk
→ skill info

skill info

This bootstrap css example is contributed by Gana JNsksk, on 14-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Card

Author Gana JNsksk

396

v.4.6

Fork Fullscreen

<section class="skills-section">
    <div class="container">
        <div class="row">
            
            <div class="col-lg-6 pe-lg-5 mb-5 mb-lg-0">
                <h6 class="text-primary fw-bold text-uppercase mb-2">Technical Proficiency</h6>
                <h2 class="fw-bold mb-4">Core Capabilities</h2>
                
                <div class="skill-item">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-bold">Frontend Development</span>
                        <span class="text-muted">95%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 95%"></div>
                    </div>
                </div>

<div class="skill-item">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-bold">System Security & Privacy</span>
                        <span class="text-muted">85%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 85%"></div>
                    </div>
                </div>

<div class="skill-item">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-bold">UI/UX Design</span>
                        <span class="text-muted">80%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 80%"></div>
                    </div>
                </div>
            </div>

<div class="col-lg-6">
                <div class="row g-3">
                    <div class="col-6 col-sm-4">
                        <div class="tech-badge shadow-sm">
                            <i class="bi bi-braces tech-icon"></i>
                            <h6 class="mb-0 fw-bold">React</h6>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4">
                        <div class="tech-badge shadow-sm">
                            <i class="bi bi-lightning-fill tech-icon"></i>
                            <h6 class="mb-0 fw-bold">Tailwind</h6>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4">
                        <div class="tech-badge shadow-sm">
                            <i class="bi bi-bootstrap-fill tech-icon"></i>
                            <h6 class="mb-0 fw-bold">Bootstrap</h6>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4">
                        <div class="tech-badge shadow-sm">
                            <i class="bi bi-ubuntu tech-icon"></i>
                            <h6 class="mb-0 fw-bold">Linux</h6>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4">
                        <div class="tech-badge shadow-sm">
                            <i class="bi bi-incognito tech-icon"></i>
                            <h6 class="mb-0 fw-bold">Privacy</h6>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4">
                        <div class="tech-badge shadow-sm">
                            <i class="bi bi-database-fill tech-icon"></i>
                            <h6 class="mb-0 fw-bold">Base64</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

More Examples