How to use Nested Card Components In Bootstrap
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:
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
Contact Us