→ Gana JNsksk
→ skill info

skill info

This bootstrap css example is contributed by Gana JNsksk, on 14-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Card

Author Gana JNsksk

v.4.6

Fork Fullscreen

<section class="skills-section">
    <div class="container">
        <div class="row">
            
            <div class="col-lg-6 pe-lg-5 mb-5 mb-lg-0">
                <h6 class="text-primary fw-bold text-uppercase mb-2">Technical Proficiency</h6>
                <h2 class="fw-bold mb-4">Core Capabilities</h2>
                
                <div class="skill-item">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-bold">Frontend Development</span>
                        <span class="text-muted">95%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 95%"></div>
                    </div>
                </div>

<div class="skill-item">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-bold">System Security & Privacy</span>
                        <span class="text-muted">85%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 85%"></div>
                    </div>
                </div>

<div class="skill-item">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-bold">UI/UX Design</span>
                        <span class="text-muted">80%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 80%"></div>
                    </div>
                </div>
            </div>

<div class="col-lg-6">
                <div class="row g-3">
                    <div class="col-6 col-sm-4">
                        <div class="tech-badge shadow-sm">
                            <i class="bi bi-braces tech-icon"></i>
                            <h6 class="mb-0 fw-bold">React</h6>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4">
                        <div class="tech-badge shadow-sm">
                            <i class="bi bi-lightning-fill tech-icon"></i>
                            <h6 class="mb-0 fw-bold">Tailwind</h6>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4">
                        <div class="tech-badge shadow-sm">
                            <i class="bi bi-bootstrap-fill tech-icon"></i>
                            <h6 class="mb-0 fw-bold">Bootstrap</h6>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4">
                        <div class="tech-badge shadow-sm">
                            <i class="bi bi-ubuntu tech-icon"></i>
                            <h6 class="mb-0 fw-bold">Linux</h6>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4">
                        <div class="tech-badge shadow-sm">
                            <i class="bi bi-incognito tech-icon"></i>
                            <h6 class="mb-0 fw-bold">Privacy</h6>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4">
                        <div class="tech-badge shadow-sm">
                            <i class="bi bi-database-fill tech-icon"></i>
                            <h6 class="mb-0 fw-bold">Base64</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

More Examples

Split Landing Page
Split Landing Page

Author:
Rami AlAjo

1 year ago

1.7k

v.4.6
Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

1 year ago

1.7k

v.4.6
Glowing Card
glowing effect and smooth hover animation

Author:
Prajwal Hallale

2 years ago

4.2k

v.5.3
Product Modal with JS

Author:
java stories story

8 months ago

1.3k

v.5.3
User Profile Card with Bootstrap
How to Use: Replace Image URL: Update the src attribute of the img tag to the actual URL of the user’s image. Update Text: Change the text inside the h5 and p elements to reflect the user’s actual name and biography

Author:
zobaidul kaziex

1 year ago

3.1k

v.4.6
bootstrap-dashboard

Author:
Joey "Manny" Torres

1 year ago

1.2k

v.5.3
test

Author:
Anonymous

3 months ago

265

v.5.3
Service Section

Author:
Shahriar Noyon

3 weeks ago

118

v.4.6
test

Author:
Anonymous

3 months ago

272

v.5.3
Kategori Produk

Author:
java stories story

8 months ago

1.7k

v.5.3
Skill Section with Progress Bar
This is a responsive skill section built with Bootstrap and external CSS. It shows different skills with progress bars like HTML, CSS, Bootstrap and JavaScript.

Author:
Happy Khatun

3 weeks ago

67

v.4.6
Carrousel banner product
It's a carousel; clicking on its categories opens a banner with the product.

Author:
Juan Antonio González Hernández

2 months ago

445

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent