<!DOCTYPE html>
<html lang-"en">
<head>
<meta charset="UTF-8">
<meta name-"viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Bootstrap Layout</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-primary text-white text-center py-4">
<h1>My Awesome Web Page</h1></header>
<main class-"container my-4">
<section class="row">
<div class="col-md-3 mb-4">
<div class-"card text-center bg-success text-white h-100">
<div class-"card-body">
Item 1
</div>
</div>
</div>
<div class="col-md-3 mb-4">
<div class-"card text-center bg-success text-white h-100">
<div class-"card-body">
Item 2</div>
</div></div>
<div class="col-md-3 mb-4“>
<div class-"card text-center bg-success text-white h-100">
<div class="card-body">
Item 3</div>
</div></div>
<div class="col-md-3 mb-4">
<div class-"card text-center bg-success text-white h-100">
<div class-"card-body">
Item 4</div>
<div></div>
</section>
<section class="d-flex justify-content-between">
<div class="flex-fill mx-2">
<div class="card text-center bg-info text-white h-100">
<div class="card-body">
Flex Item 1</div>
</div>
</div>
<div class="flex-fill mx-2">
<div class="card text-center bg-info text-white h-100">
<div class="card-body">
Flex Item 2</div>
</div>
</div>
<div class="flex-fill mx-2">
<div class="card text-center bg-info text-white h-100">
<div class="card-body">
Flex Item 3
</div>
</div>
</div>
</section></main>
<footer class-"bg-dark text-white text-center py-3">
<p>© 2024 My website</p></footer>:
cscript src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src-"https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrag.min.js"></script></body>
</html>
.card{
transition: transform.0.3s, background-color 0.3s;
}
.card:hover{
transform: scale(1.05);
}
.bg-success {
background-color：□#28a745 !important;
}
.bg-info {
background-color：■#17a2b8 !important;
}