→ 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

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