→ 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

710

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

Client

Author:
Gana JNsksk

5 months ago

728

v.4.6
A Bootstrap Playground
TBD

Author:
Pranjal Adhikari

1 year ago

1.2k

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

Author:
Jimmy Mercury

1 year ago

2.1k

v.5.3
test

Author:
Anonymous

8 months ago

448

v.5.3
final about me section
do not copy

Author:
Fitar Ahmed

5 months ago

345

v.4.6
vulgh

Author:
Anonymous

2 months ago

414

v.5.3
Education Information Section

Author:
Shahriar Noyon

5 months ago

537

v.4.6
About Page for WDD

Author:
sajid taz

4 months ago

427

v.4.6
our services

Author:
Gana JNsksk

5 months ago

600

v.4.6
my purpose

Author:
Gana JNsksk

5 months ago

612

v.4.6
bootstrap-dashboard

Author:
Joey "Manny" Torres

2 years ago

1.6k

v.5.3
Accordion

Author:
Anonymous

2 months ago

508

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent