Simple Catalog Card Template Using Bootstrap 4 with Hover Effect
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif
}
body {
background-color: #f8f8f8
}
</style>
</head>
<body>
<div class="container bg-light rounded">
<div class="h4 font-weight-bold text-center py-3">Explore more</div>
<div class="row">
<div class="col-lg-4 col-md-6 my-lg-0 my-3">
<div class="box bg-white">
<div class="d-flex align-items-center">
<div
class="rounded-circle mx-3 text-center d-flex align-items-center justify-content-center blue">
<img src="https://freepngimg.com/thumb/microphone/11-microphone-png-image-thumb.png" alt="">
</div>
<div class="d-flex flex-column"> <b>Public Speech</b> <a href="#">
<p class="text-muted">23 classes</p>
</a> </div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-lg-0 my-3">
<div class="box bg-white">
<div class="d-flex align-items-center">
<div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-orange">
<img src="https://freepngimg.com/thumb/email_marketing/5-2-email-png-thumb.png" alt="">
</div>
<div class="d-flex flex-column"> <b>Write an email</b> <a href="#">
<p class="text-muted">5 classes</p>
</a> </div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-lg-0 my-3">
<div class="box bg-white">
<div class="d-flex align-items-center">
<div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-purple">
<img src="https://freepngimg.com/thumb/technology/40061-1-machining-robot-download-free-image-thumb.png"
alt=""> </div>
<div class="d-flex flex-column"> <b>Technology</b> <a href="#">
<p class="text-muted">32 classes</p>
</a> </div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-lg-3 my-3">
<div class="box bg-white">
<div class="d-flex align-items-center">
<div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-cyan">
<img src="https://freepngimg.com/thumb/brain/80003-learning-human-albert-play-scientist-behavior-einstein-thumb.png"
alt=""> </div>
<div class="d-flex flex-column"> <b>Professions</b> <a href="#">
<p class="text-muted">5 classes</p>
</a> </div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-lg-3 my-3">
<div class="box bg-white">
<div class="d-flex align-items-center">
<div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-pink">
<img src="https://freepngimg.com/thumb/google/66809-google-docs-drive-plus-android-document-thumb.png"
alt=""> </div>
<div class="d-flex flex-column"> <b>Documentation</b> <a href="#">
<p class="text-muted">6 classes</p>
</a> </div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-lg-3 my-3">
<div class="box bg-white">
<div class="d-flex align-items-center">
<div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-orange">
<img src="https://www.freepnglogos.com/uploads/plane-png/plane-png-fort-wayne-international-airport-2.png"
alt=""> </div>
<div class="d-flex flex-column"> <b>Business Trip</b> <a href="#">
<p class="text-muted">28 classes</p>
</a> </div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-lg-0 my-3">
<div class="box bg-white">
<div class="d-flex align-items-center">
<div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-orange">
<img src="https://www.freepnglogos.com/uploads/whatsapp-circle-message-messaging-messenger-round-icon--24.png"
alt=""> </div>
<div class="d-flex flex-column"> <b>On the Phone</b> <a href="#">
<p class="text-muted">5 classes</p>
</a> </div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-lg-0 my-3">
<div class="box bg-white">
<div class="d-flex align-items-center">
<div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-green">
<img src="https://freepngimg.com/thumb/technology/63219-bin-recycling-computer-recycle-electronics-waste-electronic-thumb.png"
alt=""> </div>
<div class="d-flex flex-column"> <b>Electronics</b> <a href="#">
<p class="text-muted">5 classes</p>
</a> </div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-lg-0 my-3">
<div class="box bg-white">
<div class="d-flex align-items-center">
<div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-pista">
<img src="https://freepngimg.com/thumb/happy_person/4-2-happy-person-transparent-thumb.png"
alt=""> </div>
<div class="d-flex flex-column"> <b>Job Interview</b> <a href="#">
<p class="text-muted">5 classes</p>
</a> </div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
</body>
</html>
.container {
margin-top: 20px;
padding: 40px 20px
}
.box {
padding: 40px 30px;
transition: all .4s ease-in-out;
cursor: pointer
}
.box:hover {
box-shadow: 2px 2px 10px #a5a5a5;
transform: scale(1.03)
}
a:hover {
text-decoration: none
}
img {
object-fit: contain;
width: 35px;
height: 35px
}
p.text-muted {
margin: 0;
font-size: 0.9rem
}
b {
font-size: 1.12rem
}
.rounded-circle {
width: 60px;
height: 60px;
background-color: red
}
.blue {
background-color: #bedcfa;
transform: rotateZ(90deg)
}
.pale-blue {
background-color: #eff8ff
}
.pale-orange {
background-color: #ffe5b9
}
.pale-purple {
background-color: #e8e8e8
}
.pale-cyan {
background-color: #cffffe
}
.pale-pink {
background-color: #ffe4e4
}
.pale-pale {
background-color: #f4eeff
}
.pale-green {
background-color: #a0ffe6
}
.pale-pista {
background-color: #dbf6e9
}
//Doesn't require any JS.
This Bootstrap 4 snippet provides a clean and visually appealing catalog card template designed for showcasing products or services. It offers a simple yet effective layout, featuring card images, titles, and descriptions. The template incorporates hover effects to enhance user engagement and provide additional information on hover.
Key Features:
- Responsive Design: The card template adapts to various screen sizes, ensuring a consistent user experience across devices.
- Customizable Styling: Easily modify the appearance of the cards using Bootstrap's CSS classes to match your website's design and branding.
- Hover Effects: Add visually appealing hover effects to the cards to highlight key information or trigger actions when users hover over them.
- Clear and Concise Presentation: The cards are designed to present content in a clear and concise manner, making it easy for users to understand and navigate.
Implementation:
- Include Bootstrap 4: Ensure you have Bootstrap 4 installed and configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the catalog cards, including the container, card rows, and columns.
- Apply Bootstrap Classes: Use Bootstrap's CSS classes to style the cards and their elements, such as card, card-img-top, card-body, card-title, card-text, and btn.
- Add Hover Effects: Apply appropriate CSS classes to create hover effects, such as card-hover, card-hover-overlay, and card-hover-title.
Stylish Contact Form with Image in Tailwind CSS
Responsive Registration Form with Image in Tailwind CSS
Bootstrap 5 Payment Method Form Page with Invoice
Modern Pricing Table Design with Bootstrap 4
Responsive Multi-Level Drop-Down Navigation Menu in CSS
Interactive Bottom Navigation Bar Indicator with CSS
Real-time Password Strength Indicator in Bootstrap 5
Responsive Video Card Component for Tailwind CSS
Responsive Feature Highlight Component with Tailwind CSS
Multi-Step Form with International Phone Input and Nice Select
Responsive Review Cards Component with CSS3
Responsive CSS3 Timeline Design With Hover Effects
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
