→ Gana JNsksk
→ certifications

certifications

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

Tags: Card

Author Gana JNsksk

652

v.4.6

Fork Fullscreen

<section>
        <div class="container py-5">
            <div class="text-center mb-5">
                <h2 class="section-title d-inline-block">Training Certifications</h2>
                <p class="text-muted">Professional development and completed training programs</p>
            </div>

<div class="col-md-6 col-lg-4">
                    <div class="card cert-card h-100">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <i class="bi bi-code-square card-icon"></i>
                                <span class="badge bg-success rounded-pill">Verified</span>
                            </div>
                            <h5 class="card-title fw-semibold">Advanced Web Development</h5>
                            <p class="text-muted mb-1">Tech Academy</p>
                            <p class="text-muted small">March 15, 2026</p>

<button type="button" class="btn btn-primary w-100 mt-3" data-bs-toggle="modal"
                                data-bs-target="#cert1">
                                <i class="bi bi-eye me-2"></i>View Details
                            </button>
                        </div>
                    </div>
                </div>

<div class="col-md-6 col-lg-4">
                    <div class="card cert-card h-100">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <i class="bi bi-graph-up card-icon"></i>
                                <span class="badge bg-success rounded-pill">Verified</span>
                            </div>
                            <h5 class="card-title fw-semibold">Digital Marketing Mastery</h5>
                            <p class="text-muted mb-1">Marketing Pro Institute</p>
                            <p class="text-muted small">January 10, 2026</p>

<button type="button" class="btn btn-primary w-100 mt-3" data-bs-toggle="modal"
                                data-bs-target="#cert2">
                                <i class="bi bi-eye me-2"></i>View Details
                            </button>
                        </div>
                    </div>
                </div>

<div class="col-md-6 col-lg-4">
                    <div class="card cert-card h-100">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <i class="bi bi-kanban card-icon"></i>
                                <span class="badge bg-success rounded-pill">Verified</span>
                            </div>
                            <h5 class="card-title fw-semibold">Project Management Professional</h5>
                            <p class="text-muted mb-1">Global PM Institute</p>
                            <p class="text-muted small">December 05, 2025</p>

<button type="button" class="btn btn-primary w-100 mt-3" data-bs-toggle="modal"
                                data-bs-target="#cert3">
                                <i class="bi bi-eye me-2"></i>View Details
                            </button>
                        </div>
                    </div>
                </div>

</div>
        </div>

<div class="modal fade" id="cert1" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <h5 class="modal-title fw-bold">Advanced Web Development</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-5 text-center">
                                <div class="border p-4 bg-white rounded-3"
                                    style="height: 280px; display:flex; align-items:center; justify-content:center;">
                                    <i class="bi bi-award-fill" style="font-size: 6.5rem; color: #e9ecef;"></i>
                                </div>
                                <div class="mt-3">
                                    <span class="cert-badge">Verified Certificate</span>
                                </div>
                            </div>
                            <div class="col-md-7">
                                <p class="text-primary mb-1">Tech Academy</p>
                                <p class="text-muted">Issued on: March 15, 2026</p>
                                <hr>
                                <p><strong>Description:</strong></p>
                                <p class="text-muted">Comprehensive training covering modern frontend and backend
                                    technologies including React, Node.js, and database management.</p>

<div class="row text-center">
                                    <div class="col-4">
                                        <i class="bi bi-clock-history fs-3 text-primary"></i>
                                        <p class="small text-muted mb-0">Duration</p>
                                        <p class="fw-medium">60 Hours</p>
                                    </div>
                                    <div class="col-4">
                                        <i class="bi bi-trophy fs-3 text-primary"></i>
                                        <p class="small text-muted mb-0">Grade</p>
                                        <p class="fw-medium">A</p>
                                    </div>
                                    <div class="col-4">
                                        <i class="bi bi-link-45deg fs-3 text-primary"></i>
                                        <p class="small text-muted mb-0">Credential ID</p>
                                        <p class="fw-medium">TWA-458291</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">
                            <i class="bi bi-download me-2"></i>Download Certificate
                        </button>
                    </div>
                </div>
            </div>
        </div>

<div class="modal fade" id="cert2" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <h5 class="modal-title fw-bold">Digital Marketing Mastery</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        
                        <div class="row">
                            <div class="col-md-5 text-center">
                                <div class="border p-4 bg-white rounded-3"
                                    style="height: 280px; display:flex; align-items:center; justify-content:center;">
                                    <i class="bi bi-award-fill" style="font-size: 6.5rem; color: #e9ecef;"></i>
                                </div>
                                <div class="mt-3">
                                    <span class="cert-badge">Verified Certificate</span>
                                </div>
                            </div>
                            <div class="col-md-7">
                                <p class="text-primary mb-1">Marketing Pro Institute</p>
                                <p class="text-muted">Issued on: January 10, 2026</p>
                                <hr>
                                <p><strong>Description:</strong></p>
                                <p class="text-muted">Masterclass on SEO, social media marketing, content strategy, and
                                    data-driven campaign optimization.</p>

<div class="row text-center">
                                    <div class="col-4">
                                        <i class="bi bi-clock-history fs-3 text-primary"></i>
                                        <p class="small text-muted mb-0">Duration</p>
                                        <p class="fw-medium">45 Hours</p>
                                    </div>
                                    <div class="col-4">
                                        <i class="bi bi-trophy fs-3 text-primary"></i>
                                        <p class="small text-muted mb-0">Grade</p>
                                        <p class="fw-medium">A+</p>
                                    </div>
                                    <div class="col-4">
                                        <i class="bi bi-link-45deg fs-3 text-primary"></i>
                                        <p class="small text-muted mb-0">Credential ID</p>
                                        <p class="fw-medium">DMM-784512</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">
                            <i class="bi bi-download me-2"></i>Download Certificate
                        </button>
                    </div>
                </div>
            </div>
        </div>

<div class="modal fade" id="cert3" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <h5 class="modal-title fw-bold">Project Management Professional</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-5 text-center">
                                <div class="border p-4 bg-white rounded-3"
                                    style="height: 280px; display:flex; align-items:center; justify-content:center;">
                                    <i class="bi bi-award-fill" style="font-size: 6.5rem; color: #e9ecef;"></i>
                                </div>
                                <div class="mt-3">
                                    <span class="cert-badge">Verified Certificate</span>
                                </div>
                            </div>
                            <div class="col-md-7">
                                <p class="text-primary mb-1">Global PM Institute</p>
                                <p class="text-muted">Issued on: December 05, 2025</p>
                                <hr>
                                <p><strong>Description:</strong></p>
                                <p class="text-muted">PMP aligned training focusing on agile methodologies, risk
                                    management,
                                    and stakeholder communication.</p>

<div class="row text-center">
                                    <div class="col-4">
                                        <i class="bi bi-clock-history fs-3 text-primary"></i>
                                        <p class="small text-muted mb-0">Duration</p>
                                        <p class="fw-medium">50 Hours</p>
                                    </div>
                                    <div class="col-4">
                                        <i class="bi bi-trophy fs-3 text-primary"></i>
                                        <p class="small text-muted mb-0">Grade</p>
                                        <p class="fw-medium">A</p>
                                    </div>
                                    <div class="col-4">
                                        <i class="bi bi-link-45deg fs-3 text-primary"></i>
                                        <p class="small text-muted mb-0">Credential ID</p>
                                        <p class="fw-medium">PMP-392847</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">
                            <i class="bi bi-download me-2"></i>Download Certificate
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

More Examples

bootstrap-dashboard

Author:
Joey "Manny" Torres

2 years ago

1.5k

v.5.3
for me
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Jimmy Mercury

1 year ago

2k

v.5.3
Services part

Author:
istiakahmedchowdhury10

1 month ago

92

v.4.6
Work Experience Section

Author:
Tanvir fahad

3 months ago

463

v.4.6
working

Author:
Gana JNsksk

3 months ago

281

v.4.6
Category Tab

Author:
java stories story

1 year ago

1.7k

v.5.3
Bootstrap Product Card

Author:
Anonymous

2 years ago

5.3k

v.5.3
skill info

Author:
Gana JNsksk

3 months ago

337

v.4.6
home page

Author:
lamiajahan

1 month ago

115

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

2.1k

v.4.6
Card with background image

Author:
Nicholas

2 years ago

4.7k

v.4.6
Expanding Cards Horizontal

Author:
Juan Antonio González Hernández

6 months ago

759

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent