→ Anonymous
→ Skills & Expertise

Skills & Expertise

This bootstrap css example is contributed by Anonymous, on 11-Jun-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Progress Bar

Author Anonymous

192

v.4.6

Fork Fullscreen

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

<div class="row align-items-end mb-5">
                <div class="col-lg-12">
                    <h2 class="section-title text-center">Skills &amp; Expertise</h2>
                </div>
            </div>

<div class="container">
                <p>HTML</p>
                <div class="progress my-1">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="60"
                        aria-valuemin="0" aria-valuemax="100">60%</div>
                </div>
                <p>CSS</p>
                <div class="progress my-1">
                    <div class="progress-bar bg-info" role="progressbar" style="width: 55%" aria-valuenow="55"
                        aria-valuemin="0" aria-valuemax="100">55%</div>
                </div>
                <p>JS</p>
                <div class="progress my-1">
                    <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30"
                        aria-valuemin="0" aria-valuemax="100">30%</div>
                </div>
                <p>Python</p>
                <div class="progress my-1">
                    <div class="progress-bar bg-danger" role="progressbar" style="width: 80%" aria-valuenow="80"
                        aria-valuemin="0" aria-valuemax="100">80%</div>
                </div>
                <p>Analytics</p>
                <div class="progress my-1">
                    <div class="progress-bar bg-grey" role="progressbar" style="width: 85%" aria-valuenow="85"
                        aria-valuemin="0" aria-valuemax="100">85%
                    </div>
                </div>
            </div>
        </div>
        <div class="divider-line mb-4"></div>
        </div>
    </section>

More Examples