→ Gana JNsksk
→ Education

Education

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: Button

Author Gana JNsksk

v.4.6

Fork Fullscreen

<section class="education-section text-center">
    <div class="container">
        <h2 class="fw-bold mb-4">Academic Background</h2>
        
        
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="edu-trigger-card" data-bs-toggle="modal" data-bs-target="#educationModal">
                    <i class="bi bi-mortarboard-fill text-primary mb-3" style="font-size: 3rem;"></i>
                    <h4 class="fw-bold">View Educational History</h4>
                    <p class="text-muted">Click to view degrees, certifications, and technical training.</p>
                    <button class="btn btn-primary px-4 rounded-pill">Open Details</button>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="educationModal" tabindex="-1" aria-labelledby="educationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content shadow-lg">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold" id="educationModalLabel">
                    <i class="bi bi-book-half me-2 text-primary"></i> Academic Timeline
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-5">
                
                
                <div class="edu-item">
                    <span class="badge bg-primary mb-2">2022 - Present</span>
                    <h5 class="fw-bold mb-1">Bachelor of Science in Computer Science</h5>
                    <p class="text-primary fw-semibold mb-2">University Name / Institute</p>
                    <p class="text-muted small">Specializing in Web Engineering and Frontend Architecture. Focused on React.js and modern JavaScript standards.</p>
                </div>

<div class="edu-item">
                    <span class="badge bg-secondary mb-2">2020 - 2022</span>
                    <h5 class="fw-bold mb-1">Higher Secondary Education</h5>
                    <p class="text-primary fw-semibold mb-2">College/School Name</p>
                    <p class="text-muted small">Major in Science. Consistently focused on mathematics and early programming fundamentals.</p>
                </div>

<div class="edu-item mb-0">
                    <span class="badge bg-info text-dark mb-2">Certification</span>
                    <h5 class="fw-bold mb-1">Web Development Professional Certificate</h5>
                    <p class="text-primary fw-semibold mb-2">Online Learning Platform / Tech Academy</p>
                    <ul class="text-muted small ps-3">
                        <li>Advanced Frontend Development (React & Bootstrap)</li>
                        <li>Linux System Administration & Privacy Tools</li>
                    </ul>
                </div>

</div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light rounded-pill" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

More Examples