→ 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

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

Client Feedback

Author:
Shahriar Noyon

3 weeks ago

100

v.4.6
scroll animation image with title

Author:
Juan Antonio González Hernández

3 months ago

528

v.4.6
Sound Board
Sound Board

Author:
Rami AlAjo

1 year ago

1.6k

v.4.6
my purpose

Author:
Gana JNsksk

4 weeks ago

70

v.4.6
Protfolio_page

Author:
Sahin Miah

3 weeks ago

103

v.4.6
mission and vission
do not copy

Author:
Fitar Ahmed

3 weeks ago

50

v.4.6
Service list section

Author:
Ad Apon7

1 month ago

129

v.5.3
Our Existing Clients Section

Author:
Shahriar Noyon

3 weeks ago

126

v.4.6
Training & Certifications Section

Author:
Shahriar Noyon

3 weeks ago

63

v.4.6
working

Author:
Gana JNsksk

3 weeks ago

63

v.4.6
Hero slider

Author:
Juan Antonio González Hernández

2 months ago

1.1k

v.5.3
A Bootstrap Playground
TBD

Author:
Pranjal Adhikari

11 months ago

895

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent