skill

This bootstrap css example is contributed by istiakahmedchowdhury10, on 22-Jul-2026. Component is made with bootstrap css v.4.6. It is responsive. similar terms for this example is blog template

Tags: Blog

Author istiakahmedchowdhury10

171

v.4.6

Fork Fullscreen

<section class="py-5 bg-white">
        <div class="container">
            <div class="row align-items-center justify-content-between g-4">

<div class="col-md-5">
                    <span class="text-primary text-uppercase fw-bold tracking-wider small">My Expertise</span>
                    <h2 class="display-5 fw-bold text-dark mt-1 mb-3"> My Spacial Skills</h2>
                    <p class="lead text-muted mb-4">
                        I specialize in building clean, responsive, and high-performance user interfaces. Here is a
                        breakdown of my technical proficiency and expertise levels.
                    </p>
                    <a href="#contact" class="btn btn-outline-primary px-4 py-2 fw-medium rounded-pill">Hire Me</a>
                </div>

<div class="col-md-6">
                    <div class="skill-bars-container d-flex flex-column gap-4">

<div class="skill-item">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold text-dark">HTML & Bootstrap </span>
                                <span class="fw-bold text-primary">95%</span>
                            </div>
                            <div class="progress rounded-pill" style="height: 10px;">
                                <div class="progress-bar bg-primary rounded-pill" role="progressbar" style="width: 95%"
                                    aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>

<div class="skill-item">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold text-dark">CSS & Custom Styling</span>
                                <span class="fw-bold text-primary">85%</span>
                            </div>
                            <div class="progress rounded-pill" style="height: 10px;">
                                <div class="progress-bar bg-primary rounded-pill" role="progressbar" style="width: 85%"
                                    aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>

<div class="skill-item">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold text-dark">JavaScript</span>
                                <span class="fw-bold text-primary">75%</span>
                            </div>
                            <div class="progress rounded-pill" style="height: 10px;">
                                <div class="progress-bar bg-primary rounded-pill" role="progressbar" style="width: 75%"
                                    aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>

<div class="skill-item">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold text-dark">UI/UX Layout Design</span>
                                <span class="fw-bold text-primary">80%</span>
                            </div>
                            <div class="progress rounded-pill" style="height: 10px;">
                                <div class="progress-bar bg-primary rounded-pill" role="progressbar" style="width: 80%"
                                    aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>

</div>
                </div>

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

More Examples

Liberation War Archive - Documents

Author:
web.asset.edu

3 months ago

300

v.5.3
about me gana

Author:
Gana JNsksk

5 months ago

687

v.4.6
A Bootstrap Playground
TBD

Author:
Pranjal Adhikari

1 year ago

1.2k

v.4.6
Personl

Author:
Gana JNsksk

5 months ago

345

v.4.6
Blog post layout
Minimal and clean blog post layout

Author:
Juniper

2 years ago

4.8k

v.5.3
personal biography

Author:
Huryra

2 months ago

166

v.4.6
Responsive blog home layout

Author:
Juniper

2 years ago

3.3k

v.5.3
Working

Author:
istiakahmedchowdhury10

2 months ago

152

v.4.6
Liberation War Archive - Home

Author:
web.asset.edu

3 months ago

247

v.5.3
E-Commerce Full

Author:
Zahid Hasan Riyad

2 months ago

739

v.5.3
Blog template

Author:
Riz Mohammad

2 years ago

3.4k

v.5.3
Personl Details

Author:
Gana JNsksk

5 months ago

378

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent