→ Shahriar Noyon
→ Skills & Expertise

Skills & Expertise

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

Tags: Card

Author Shahriar Noyon

358

v.4.6

Fork Fullscreen

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

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

<div class="row align-items-end mb-5">
                <div class="col-lg-6">
                    <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>

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

More Examples

for me
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Jimmy Mercury

1 year ago

2.1k

v.5.3
Elon Musk 4
Service Page 4

Author:
RAHAT RAHMAN OFICIAL

4 months ago

303

v.4.6
Our Clients

Author:
Gana JNsksk

4 months ago

603

v.4.6
Training & Certifications Section

Author:
Shahriar Noyon

4 months ago

391

v.4.6
service

Author:
lamiajahan

1 month ago

136

v.4.6
Map Section

Author:
Tanvir fahad

4 months ago

879

v.4.6
PlantStore full website

Author:
Zahid Hasan Riyad

1 month ago

293

v.5.3
Skill Section with Progress Bar
This is a responsive skill section built with Bootstrap and external CSS. It shows different skills with progress bars like HTML, CSS, Bootstrap and JavaScript.

Author:
Happy Khatun

4 months ago

546

v.4.6
Our Existing Clients Section

Author:
Shahriar Noyon

4 months ago

784

v.4.6
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

1 year ago

4k

v.4.6
HTML and JavaScript for Product Showcase Page
JavaScript: Pagination Handling: The script fetches images based on the current page and updates the pagination controls dynamically. Product Cards: Each product is displayed as a card with an image, title, description, and price

Author:
zobaidul kaziex

2 years ago

2.4k

v.4.6
serviceComplate

Author:
Sahin Miah

4 months ago

871

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent