→ 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

244

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

Home Page of portfolio (WDD)

Author:
sajid taz

1 month ago

491

v.4.6
main css
do not copy

Author:
Fitar Ahmed

2 months ago

758

v.4.6
Protfolio_page

Author:
Sahin Miah

2 months ago

824

v.4.6
about page

Author:
lamiajahan

2 weeks ago

83

v.4.6
Mission & Vision

Author:
istiakahmedchowdhury10

2 weeks ago

56

v.4.6
skill info

Author:
Gana JNsksk

2 months ago

318

v.4.6
Service Page

Author:
Shahriar Noyon

2 months ago

270

v.4.6
Test

Author:
Anonymous

3 months ago

237

v.5.3
card

Author:
Awais Farman

7 months ago

545

v.5.3
Bootstrap Product Card

Author:
Anonymous

2 years ago

5.2k

v.5.3
Service Section for WDD

Author:
sajid taz

1 month ago

286

v.4.6
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

1 year ago

8.8k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent