How to Display a Card within a Card using Bootstrap ?
In Bootstrap, the Card component is used to create stylish and responsive containers for displaying various types of content. We can create a Card within a Card effect with different approaches using Bootstrap including the Nested Card Components approach and Card Group approach.
Table of Content
- Using Nested Card Components
- Using Card Group
Using Nested Card Components
In this approach, we are using nested Card Components in Bootstrap to create a Card within a Card layout. The outer card (outer-card) contains the title “Programming Languages” and a paragraph with programming language names, while the inner card (inner-card) contains details about Python, including its title and description.
Example: The below example uses Nested Card Components to display a Card within a Card using Bootstrap.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap using Nested Card Components</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h3 class="text-center mb-4">
Card within a Card in Bootstrap
using Nested Card Components
</h3>
<div class="card mb-3 border-0 shadow-lg
rounded-3 outer-card
animate__animated animate__fadeInUp">
<div class="card-body bg-danger
text-white rounded">
<h5 class="card-title">
Programming Languages
</h5>
<p class="card-text">
Python, Java, C++ are the Programming Languages
</p>
<div class="card mt-3 border-0 shadow
rounded-3 inner-card
animate__animated
animate__fadeInUp">
<div class="card-body bg-warning rounded">
<h5 class="card-title">
Python
</h5>
<p class="card-text">
Python is Simple Language
</p>
</div>
</div>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
Using Card Group
In this approach, we are using Bootstrap’s Card Group component to nest cards within each other, creating a hierarchical structure for content organization and display. This method uses Bootstrap’s built-in classes for styling and layout, including borders, shadows, and animations, resulting in a visually appealing and structured design.
Example: The below example uses Card Group to display a Card within a Card using Bootstrap.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Using Card Group</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h3 class="text-center mb-4">
Card within a Card in Bootstrap Using Card Group
</h3>
<div class="card-group">
<div
class="card main-card border-0
shadow-lg rounded-3 animate__animated
animate__fadeInUp animate__delay-1s">
<div class="card-body bg-primary
text-white rounded">
<h5 class="card-title">
Programming Languages
</h5>
<p class="card-text">
Python, Java, C++ are the Programming Languages
</p>
<div
class="card mt-3 nested-card1
border-0 shadow rounded-3
animate__animated
animate__fadeInUp
animate__delay-2s">
<div class="card-body bg-danger
text-white rounded">
<h5 class="card-title">
Python
</h5>
<p class="card-text">
Python is Simple Language
</p>
<div
class="card mt-3 nested-card2
border-0 shadow rounded-3
animate__animated
animate__fadeInUp
animate__delay-3s">
<div class="card-body
bg-warning rounded">
<h5 class="card-title">
Java
</h5>
<p class="card-text">
Java is a Popular
Programming Language
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
rel="stylesheet">
</body>
</html>
Output:
Contact Us