Section Title

This bootstrap css example is contributed by istiakahmedchowdhury10, on 22-Jul-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Hero

Author istiakahmedchowdhury10

213

v.4.6

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 Information
                </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

Hero slider

Author:
Juan Antonio González Hernández

8 months ago

3.3k

v.5.3
Hero section with an image

Author:
Ankit khedkar

2 years ago

16k

v.5.3
Clean hero section with image

Author:
Prajwal Hallale

2 years ago

4.2k

v.5.3
portfolio

Author:
Ad Apon7

6 months ago

970

v.5.3
Skills Information section

Author:
Ad Apon7

5 months ago

879

v.5.3
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

3 months ago

668

v.5.3
About Section

Author:
istiakahmedchowdhury10

3 months ago

163

v.4.6
portfolio page

Author:
Md. Hasibur Rahman

4 months ago

257

v.4.6
aboutContwnt

Author:
Sahin Miah

5 months ago

870

v.4.6
Home Page

Author:
Md. Hasibur Rahman

4 months ago

289

v.4.6
Gradient Hero Section
A visually stunning hero section with a gradient background and a call-to-action button.

Author:
Prajwal Hallale

2 years ago

6.1k

v.5.3
Personal Portfolio Service Section

Author:
Creative Araf

4 months ago

435

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent