I am new to Bootstrap 5, html and, CSS. However, I am using them to create a website and I am also using Bootstrap 5 to create cards, but I wanted to make the cards clickable so that they will link to another page on the website. But after adding the anchor tag the card is still not clickable.
Test.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home |</title>
<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/index.css" />
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Default"
disabled
href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
>
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Web Awesome"
href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- SERVICES SECTION START -->
<section>
<div class="container">
<div class="row py-5">
<h2 class="display-6 mb-4">Our Services</h2>
<div class="col-lg-4 col-md-6">
<a href="/about.html" class="nav-link"></a>
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-camera-cctv fa-3x"></i>
<h4>CCTV Services</h4>
<p class="p-2">
<b>CCTV Services</b> are an essential component of any business. CCTV provides real-time monitoring of multiple locations; the security they supply is indispensable, allowing businesses to have peace of mind knowing that...
</p>
</div>
</div>
<!-- <div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2">
<i class="fa-solid fa-sign-hanging fa-3x"></i>
<h4>Digital Signage</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div> -->
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-database fa-3x"></i>
<h4>Datacenter Support</h4>
<p class="p-2">
<b>Datacenters</b> are the foundation of many modern businesses, providing the infrastructure and resources necessary to save, process, and dispense data. They produce an off-premises location to secure and back up your business's data.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-sign-hanging fa-3x"></i>
<h4>Digital Signage</h4>
<p class="p-2">
<b>Digital Signage</b> has grown rapidly over the last two decades well beyond just a flashy trend for big businesses in the realm of marketing and advertising, and the general dissemination of information. Now it has become the expected strategy.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-headset fa-3x"></i>
<h4>General Support</h4>
<p class="p-2">
<b>General Support</b> is a crucial element to every modern business; providing essential support to businesses of all shapes and sizes. The focal point of General Support is to...
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-server fa-3x"></i>
<h4>Network Support</h4>
<p class="p-2">
<b>Network Support</b> includes making sure all networking hardware, software, and other related dependencies are both up to date and functioning properly. Monitoring the network for potential problems...
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-bars fa-3x"></i>
<h4>Additional Services</h4>
<p class="p-2">
<br/>
<br/>
<br/>
<br/>
<br/>
</p>
</div>
</div>
</div>
</div>
</section>
<!-- SERVICES SECTION CLOSE -->
</body>
</html>
Test.css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
background: hsl(233, 47%, 96%);
font-family: 'Poppins', sans-serif;
}
hr {
border: 1.5px solid hsl(216, 90%, 44%)
}
.crd {
background: hsl(233, 47%, 96%);
transition: all;
}
.crd:hover {
background: hsl(216, 90%, 44%);
color: #fff;
transition: 0.5s;
}
.card img {
margin: auto;
}
#rounded_circle {
width: 76px;
aspect-ratio: 1;
background-color: hsl(0, 0%, 75%);
}
footer a {
color: hsl(0, 0%, 100%);
}
#footer {
color: hsl(0, 0%, 100%);
}
#copyright {
border-top: 1px solid hsl(0, 0%, 20%) ;
}
.c-item {
height: 480px;
}
.c-img {
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
#team-img {
height: 100%;
object-fit: cover;
}
@media (min-width: 576px) {
.dropdown:hover > .dropdown-menu {
display: block;
margin-top: 0;
}
}
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
background: hsl(233, 47%, 96%);
font-family: 'Poppins', sans-serif;
}
hr {
border: 1.5px solid hsl(216, 90%, 44%)
}
.crd {
background: hsl(233, 47%, 96%);
transition: all;
}
.crd:hover {
background: hsl(216, 90%, 44%);
color: #fff;
transition: 0.5s;
}
.card img {
margin: auto;
}
#rounded_circle {
width: 76px;
aspect-ratio: 1;
background-color: hsl(0, 0%, 75%);
}
footer a {
color: hsl(0, 0%, 100%);
}
#footer {
color: hsl(0, 0%, 100%);
}
#copyright {
border-top: 1px solid hsl(0, 0%, 20%) ;
}
.c-item {
height: 480px;
}
.c-img {
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
#team-img {
height: 100%;
object-fit: cover;
}
@media (min-width: 576px) {
.dropdown:hover > .dropdown-menu {
display: block;
margin-top: 0;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home |</title>
<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/index.css" />
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Default"
disabled
href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
>
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Web Awesome"
href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- SERVICES SECTION START -->
<section>
<div class="container">
<div class="row py-5">
<h2 class="display-6 mb-4">Our Services</h2>
<div class="col-lg-4 col-md-6">
<a href="/about.html" class="nav-link"></a>
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-camera-cctv fa-3x"></i>
<h4>CCTV Services</h4>
<p class="p-2">
<b>CCTV Services</b> are an essential component of any business. CCTV provides real-time monitoring of multiple locations; the security they supply is indispensable, allowing businesses to have peace of mind knowing that...
</p>
</div>
</div>
<!-- <div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2">
<i class="fa-solid fa-sign-hanging fa-3x"></i>
<h4>Digital Signage</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div> -->
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-database fa-3x"></i>
<h4>Datacenter Support</h4>
<p class="p-2">
<b>Datacenters</b> are the foundation of many modern businesses, providing the infrastructure and resources necessary to save, process, and dispense data. They produce an off-premises location to secure and back up your business's data.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-sign-hanging fa-3x"></i>
<h4>Digital Signage</h4>
<p class="p-2">
<b>Digital Signage</b> has grown rapidly over the last two decades well beyond just a flashy trend for big businesses in the realm of marketing and advertising, and the general dissemination of information. Now it has become the expected strategy.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-headset fa-3x"></i>
<h4>General Support</h4>
<p class="p-2">
<b>General Support</b> is a crucial element to every modern business; providing essential support to businesses of all shapes and sizes. The focal point of General Support is to...
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-server fa-3x"></i>
<h4>Network Support</h4>
<p class="p-2">
<b>Network Support</b> includes making sure all networking hardware, software, and other related dependencies are both up to date and functioning properly. Monitoring the network for potential problems...
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-bars fa-3x"></i>
<h4>Additional Services</h4>
<p class="p-2">
<br/>
<br/>
<br/>
<br/>
<br/>
</p>
</div>
</div>
</div>
</div>
</section>
<!-- SERVICES SECTION CLOSE -->
</body>
</html>
2
Answers
Bootstrap offer you a lovely solution with the stretched-link class. You just need to add a link with this class into your card and the card, suddenly becomes clickable.
source : https://getbootstrap.com/docs/4.4/utilities/stretched-link/