→ Gana JNsksk
→ ss skill

ss skill

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

Tags: Card

Author Gana JNsksk

265

v.4.6

Fork Fullscreen

<section class="skills-section">
        <div class="container">

<div class="row align-items-end mb-5">
                <div class="col-lg-6">
                    <p class="section-label">What I Do</p>
                    <h2 class="section-title">Skills &amp; Expertise</h2>
                </div>
                <div class="col-lg-5 offset-lg-1 mt-3 mt-lg-0">
                    <p class="section-desc mb-0">
                        A focused set of technical and creative skills built through real-world projects and continuous
                        learning.
                    </p>
                </div>
            </div>

<div class="row g-3 mb-5">

<div class="col-sm-6 col-lg-3">
                    <div class="skill-card">
                        <div class="skill-icon-wrap"><i class="bi bi-filetype-html"></i></div>
                        <div class="skill-name">HTML / CSS</div>
                        <div class="skill-bar-track">
                            <div class="skill-bar-fill" data-width="92"></div>
                        </div>
                        <div class="skill-meta"><span>Proficiency</span><span>92%</span></div>
                    </div>
                </div>

<div class="col-sm-6 col-lg-3">
                    <div class="skill-card">
                        <div class="skill-icon-wrap"><i class="bi bi-filetype-js"></i></div>
                        <div class="skill-name">JavaScript</div>
                        <div class="skill-bar-track">
                            <div class="skill-bar-fill" data-width="85"></div>
                        </div>
                        <div class="skill-meta"><span>Proficiency</span><span>85%</span></div>
                    </div>
                </div>

<div class="col-sm-6 col-lg-3">
                    <div class="skill-card">
                        <div class="skill-icon-wrap"><i class="bi bi-bootstrap"></i></div>
                        <div class="skill-name">Bootstrap</div>
                        <div class="skill-bar-track">
                            <div class="skill-bar-fill" data-width="90"></div>
                        </div>
                        <div class="skill-meta"><span>Proficiency</span><span>90%</span></div>
                    </div>
                </div>

<div class="col-sm-6 col-lg-3">
                    <div class="skill-card">
                        <div class="skill-icon-wrap"><i class="bi bi-code-slash"></i></div>
                        <div class="skill-name">React</div>
                        <div class="skill-bar-track">
                            <div class="skill-bar-fill" data-width="78"></div>
                        </div>
                        <div class="skill-meta"><span>Proficiency</span><span>78%</span></div>
                    </div>
                </div>

<div class="col-sm-6 col-lg-3">
                    <div class="skill-card">
                        <div class="skill-icon-wrap"><i class="bi bi-server"></i></div>
                        <div class="skill-name">Node.js</div>
                        <div class="skill-bar-track">
                            <div class="skill-bar-fill" data-width="72"></div>
                        </div>
                        <div class="skill-meta"><span>Proficiency</span><span>72%</span></div>
                    </div>
                </div>

<div class="col-sm-6 col-lg-3">
                    <div class="skill-card">
                        <div class="skill-icon-wrap"><i class="bi bi-database"></i></div>
                        <div class="skill-name">SQL / Databases</div>
                        <div class="skill-bar-track">
                            <div class="skill-bar-fill" data-width="68"></div>
                        </div>
                        <div class="skill-meta"><span>Proficiency</span><span>68%</span></div>
                    </div>
                </div>

<div class="col-sm-6 col-lg-3">
                    <div class="skill-card">
                        <div class="skill-icon-wrap"><i class="bi bi-git"></i></div>
                        <div class="skill-name">Git &amp; Version Control</div>
                        <div class="skill-bar-track">
                            <div class="skill-bar-fill" data-width="88"></div>
                        </div>
                        <div class="skill-meta"><span>Proficiency</span><span>88%</span></div>
                    </div>
                </div>

<div class="col-sm-6 col-lg-3">
                    <div class="skill-card">
                        <div class="skill-icon-wrap"><i class="bi bi-palette"></i></div>
                        <div class="skill-name">UI Design</div>
                        <div class="skill-bar-track">
                            <div class="skill-bar-fill" data-width="80"></div>
                        </div>
                        <div class="skill-meta"><span>Proficiency</span><span>80%</span></div>
                    </div>
                </div>

</div>

<p class="section-label mb-3">Also Familiar With</p>
            <div class="d-flex flex-wrap gap-2">
                <span class="tag-pill"><i class="bi bi-filetype-py"></i> Python</span>
                <span class="tag-pill"><i class="bi bi-cloud"></i> REST APIs</span>
                <span class="tag-pill"><i class="bi bi-layout-text-sidebar"></i> Figma</span>
                <span class="tag-pill"><i class="bi bi-box-seam"></i> Docker</span>
                <span class="tag-pill"><i class="bi bi-shield-check"></i> Web Security</span>
                <span class="tag-pill"><i class="bi bi-phone"></i> Responsive Design</span>
                <span class="tag-pill"><i class="bi bi-graph-up"></i> SEO Basics</span>
                <span class="tag-pill"><i class="bi bi-terminal"></i> CLI Tools</span>
            </div>

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

More Examples