// projects.bootstrap
10 Best Bootstrap Projects
Hand-picked and ordered easiest → hardest — each with complete code and expected output. Build these to turn lessons into a portfolio.
Back to Bootstrap course
// solution.code
bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Profile Card</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body class="bg-light">
<!-- Container centers content and adds padding -->
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<!-- Bootstrap Card Component -->
<div class="card shadow-sm">
<!-- Profile Image with Bootstrap utilities -->
<img src="https://via.placeholder.com/400x400/007bff/ffffff?text=JD"
class="card-img-top rounded-circle mx-auto mt-4"
alt="Profile Photo"
style="width: 150px; height: 150px; object-fit: cover;">
<!-- Card Body -->
<div class="card-body text-center">
<h5 class="card-title fw-bold">John Doe</h5>
<p class="card-text text-muted">Full Stack Developer</p>
<p class="card-text small">Building amazing web experiences with modern technologies.</p>
<!-- Social Media Links using Bootstrap Icons -->
<div class="d-flex justify-content-center gap-3 mt-3">
<a href="#" class="btn btn-outline-primary btn-sm">
<i class="bi bi-twitter"></i> Twitter
</a>
<a href="#" class="btn btn-outline-dark btn-sm">
<i class="bi bi-github"></i> GitHub
</a>
<a href="#" class="btn btn-outline-info btn-sm">
<i class="bi bi-linkedin"></i> LinkedIn
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> output
Displays a centered, responsive card with a circular profile image placeholder, the name 'John Doe', a job title, brief description, and three social media buttons (Twitter, GitHub, LinkedIn) with icons. The card is styled with shadow and proper spacing, adapting to different screen sizes.