How to useBootstrap Card Component in Bootstrap

These are the following classes we have used in the code to make the card with tabs:

card: The card class as a parent to create a basic card.
card-header: The card-header provides a header to the card
card-body: The basic building block of a card is the card-body.
nav: It creates a navigation list.
nav-tabs: This class styles the navigation list to appear as tabs.
nav-link: This style each individual tab link.
active: The active class allows you to move quickly and displays the part of the page you are currently in.
tab-pane: It contains the content associated with each tab.

Example: The following code demonstrates the card with three different tabs with some contents using Bootstrap 5 libraries and it is responsive.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, 
                                  initial-scale=1.0">
   <title>Bootstrap Tabs in Card</title>
    
   <!-- Bootstrap CSS -->
   <link href=
 "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <script src=
 "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">
    </script>
   <style>
        /* Override Bootstrap's link active state styles */
       .nav-link {
          color: #fff !important;
    
        }      
       .nav-link.active{
           color: rgb(42, 165, 73) !important;
           background-color: aliceblue !important;
       }
   </style>
</head>
 
<body>
     
    <div class="container text-center">
         <div class="mt-1"> 
            <h2 class="text-success"> 
                w3wiki 
            </h2> 
            <h3> 
                Card with Tabs 
                and content in Bootstrap 5 ?
            </h3> 
        </div> 
       <div class="row justify-content-center mt-2">
           <div class="col-md-6">
               <div class="card">
                   <div class="card-header bg-success text-white">
                       <ul class="nav nav-tabs card-header-tabs" id="myTab"
                           role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="tab1-tab"
                                   data-bs-toggle="tab"
                                   href="#tab1" role="tab"
                                   aria-controls="tab1" aria-selected="true">
                                   Read
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-white" id="tab2-tab"
                                   data-bs-toggle="tab" href="#tab2" role="tab"
                                   aria-controls="tab2" aria-selected="false">
                                  Practice
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-white" id="tab3-tab"
                                  data-bs-toggle="tab" href="#tab3" role="tab"
                                  aria-controls="tab3" aria-selected="false">
                                  Learn
                                </a>
                            </li>
                        </ul>
                   </div>
                   <div class="card-body">
                       <div class="tab-content" id="myTabContent">
                           <div class="tab-pane fade show active" id="tab1"
                                role="tabpanel" aria-labelledby="tab1-tab">
                               <p>
                                   <strong class="text-success">
                                         Company Profile and Brand
                                    </strong><br>
                                   w3wiki is a leading platform that provides 
                                   computer science resources and coding challenges 
                                   for programmers and technology enthusiasts, 
                                   along with interview and exam preparations for 
                                   upcoming aspirants. With a strong emphasis on 
                                   enhancing coding skills and knowledge, it has 
                                   become a trusted destination for over 12 million
                                   plus registered users worldwide. 
                                   <br/>
                                   Our exceptional mentors hailing from top colleges
                                   & organizations have the ability 
                                   <br/>
                                   Our brand is built on the pillars of expertise, 
                                   accessibility, and community. We strive to empower 
                                   individuals to enhance their programming skills, 
                                   to bridge the gap between academia and industry, 
                                   and provide a supportive community to the learners.                                   
                               </p>
                                <a href=
                            "https://www.w3wiki.org/" class="text-success">
                                  Visit w3wiki
                                </a> <!-- Example link -->
                            </div>
                            <div class="tab-pane fade" id="tab2" role="tabpanel"
                                aria-labelledby="tab2-tab">
                               <p>This is the content of Tab 2.</p>
                            </div>
                            <div class="tab-pane fade" id="tab3" role="tabpanel"
                               aria-labelledby="tab3-tab">
                               <p>This is the content of Tab 3.</p>
                            </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>    
</body>
 
</html>

Output:

How to Create a Card with Tabs & Content in Bootstrap 5 ?

We will create a Card with Tabs and content in Bootstrap 5. Bootstrap 5 Cards refers to a user interface where related information is organized into individual cards that can be interacted with and rearranged for easy viewing and access. The individual cards are known as tabs. This approach is commonly used in mobile app design and website design for a visually appealing and organized way of presenting information.

The card is a component provided by Bootstrap 5 which provides a flexible and extensible content container with multiple variants and options. It includes options for headers and footers. Cards support a wide variety of content, including images, text, list groups, links, and more.