How to Display a Card within a Card using Bootstrap ?

Last Updated : 09 Apr, 2024

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.

HTML

<!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.

HTML

<!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>