→ Ad Apon7
→ Skills Information section

Skills Information section

This bootstrap css example is contributed by Ad Apon7, on 15-May-2026. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Hero

Author Ad Apon7

152

v.5.3

Fork Fullscreen

<div class="text-center mb-5">
            <span class="text-danger small fw-bold text-uppercase tracking-widest d-block mb-2">
                Expertise
            </span>
            <h2 class="display-6 fw-bold text-dark">
                My Skills
            </h2>
        </div>

<div class="col-md-6">
                <div class="mb-2 d-flex justify-content-between align-items-center">
                    <h5 class="h6 fw-bold text-dark mb-0">HTML5</h5>
                    <span class="text-muted small fw-semibold">95%</span>
                </div>
                <div class="progress custom-progress">
                    <div class="progress-bar custom-progress-bar w-html"></div>
                </div>
            </div>

<div class="col-md-6">
                <div class="mb-2 d-flex justify-content-between align-items-center">
                    <h5 class="h6 fw-bold text-dark mb-0">CSS3</h5>
                    <span class="text-muted small fw-semibold">90%</span>
                </div>
                <div class="progress custom-progress">
                    <div class="progress-bar custom-progress-bar w-css"></div>
                </div>
            </div>

<div class="col-md-6">
                <div class="mb-2 d-flex justify-content-between align-items-center">
                    <h5 class="h6 fw-bold text-dark mb-0">Tailwind CSS</h5>
                    <span class="text-muted small fw-semibold">95%</span>
                </div>
                <div class="progress custom-progress">
                    <div class="progress-bar custom-progress-bar w-tailwind"></div>
                </div>
            </div>

<div class="col-md-6">
                <div class="mb-2 d-flex justify-content-between align-items-center">
                    <h5 class="h6 fw-bold text-dark mb-0">Bootstrap</h5>
                    <span class="text-muted small fw-semibold">90%</span>
                </div>
                <div class="progress custom-progress">
                    <div class="progress-bar custom-progress-bar w-bootstrap"></div>
                </div>
            </div>

<div class="col-md-6">
                <div class="mb-2 d-flex justify-content-between align-items-center">
                    <h5 class="h6 fw-bold text-dark mb-0">JavaScript (ES6+)</h5>
                    <span class="text-muted small fw-semibold">88%</span>
                </div>
                <div class="progress custom-progress">
                    <div class="progress-bar custom-progress-bar w-js"></div>
                </div>
            </div>

<div class="col-md-6">
                <div class="mb-2 d-flex justify-content-between align-items-center">
                    <h5 class="h6 fw-bold text-dark mb-0">TypeScript</h5>
                    <span class="text-muted small fw-semibold">80%</span>
                </div>
                <div class="progress custom-progress">
                    <div class="progress-bar custom-progress-bar w-ts"></div>
                </div>
            </div>

<div class="col-md-6">
                <div class="mb-2 d-flex justify-content-between align-items-center">
                    <h5 class="h6 fw-bold text-dark mb-0">React.js</h5>
                    <span class="text-muted small fw-semibold">88%</span>
                </div>
                <div class="progress custom-progress">
                    <div class="progress-bar custom-progress-bar w-react"></div>
                </div>
            </div>

<div class="col-md-6">
                <div class="mb-2 d-flex justify-content-between align-items-center">
                    <h5 class="h6 fw-bold text-dark mb-0">Next.js (App Router)</h5>
                    <span class="text-muted small fw-semibold">85%</span>
                </div>
                <div class="progress custom-progress">
                    <div class="progress-bar custom-progress-bar w-next"></div>
                </div>
            </div>

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

More Examples

Simple hero section

Author:
Mateo Rojas

1 year ago

7.2k

v.5.3
Personal Biography section

Author:
Ad Apon7

3 weeks ago

132

v.5.3
Simple hero
Hero section with a linear gradient

Author:
Moana silva

1 year ago

2.8k

v.4.6
portfolio

Author:
Ad Apon7

1 month ago

106

v.5.3
home_all_contant

Author:
Sahin Miah

3 weeks ago

82

v.4.6
aboutContwnt

Author:
Sahin Miah

3 weeks ago

69

v.4.6
mision and vission

Author:
Ad Apon7

1 month ago

131

v.5.3
Clean hero section with image
tugas

Author:
Anonymous

10 months ago

1.3k

v.5.3
slider

Author:
Ad Apon7

1 month ago

89

v.5.3
portfolio

Author:
Ad Apon7

1 month ago

89

v.4.6
Elon Musk 2
hero to last home

Author:
RAHAT RAHMAN OFICIAL

3 weeks ago

75

v.4.6
Hero slider

Author:
Juan Antonio González Hernández

2 months ago

1.1k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent