→ 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

430

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