→ 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

Split Landing Page
Split Landing Page

Author:
Rami AlAjo

1 year ago

1.7k

v.4.6
Gradient Hero Section with Pulsing Button

Author:
Ranadhir Debnath

8 months ago

1.4k

v.5.3
Sign in with Google

Author:
Juan Martinez

1 year ago

4.9k

v.5.3
Boostrap Buttons
Basic Buttons - Standard button styles with different color variations Outline Buttons - Ghost buttons with colored borders that fill on hover Button Sizes - Three different size variations for different contexts Icon Buttons - Buttons with Bootstrap Icons integration Block Buttons - Full-width buttons using Bootstrap's grid system Button Groups - Grouped buttons for related actions Loading Buttons - Interactive buttons with loading spinners

Author:
Asmath

1 year ago

3.8k

v.5.3
Pulsing Button with Bootstrap 5

Author:
Andreas Müller

1 year ago

2.9k

v.5.3
Spinner buttons
Loading spinner buttons

Author:
Mishti

2 years ago

2.4k

v.5.3
Outlined Buttons with Animated Hover

Author:
Prajwal Hallale

2 years ago

2.4k

v.5.3
Sound Board
Sound Board

Author:
Rami AlAjo

1 year ago

1.6k

v.4.6
Buttons with Icons

Author:
Prajwal Hallale

2 years ago

6.3k

v.5.3
Pulsing Button

Author:
Prajwal Hallale

2 years ago

4.3k

v.5.3
Botones

Author:
Gustavo Bertolini

5 months ago

372

v.4.6
Rotating Navigation Animation
Rotating Navigation Animation

Author:
Rami AlAjo

1 year ago

2.2k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent