HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Page with Bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="bg-success text-white text-center py-4">
<h1>My Awesome Web Page</h1>
</header>
<main class="container my-5">
<section class="row">
<div class="col-lg-4 col-md-6 mb-4">
<div class="card grid-item">
<div class="card-body">
<h5 class="card-title">Item 1</h5>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card grid-item">
<div class="card-body">
<h5 class="card-title">Item 2</h5>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card grid-item">
<div class="card-body">
<h5 class="card-title">Item 3</h5>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card grid-item">
<div class="card-body">
<h5 class="card-title">Item 4</h5>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card grid-item">
<div class="card-body">
<h5 class="card-title">Item 5</h5>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-dark text-white text-center py-3">
<p>Footer Content</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
CSS
.grid-item {
background-color: #ffcc00;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.grid-item:hover {
transform: scale(1.05);
background-color: #ffd700;
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter