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

Last Updated : 30 Jul, 2024

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.

Preview

These are the following appraoches:

Table of Content

Using the card component of Bootstrap
Using nav-tabs

Approach 1: Using Bootstrap Card Component

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/[email protected]/dist/css/bootstrap.min.css"
		rel="stylesheet">
	<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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"> 
				GeeksforGeeks 
			</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>
								GeeksforGeeks 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.geeksforgeeks.org/" class="text-success">
								Visit GeeksforGeeks
								</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:

Approach 2: Using nav-tabs

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

container: This class is used to create a responsive fixed-width container to hold the content. It helps to keep the content centered and consistent across different screen sizes.
nav: It creates a navigation list.
nav-tabs: This class styles the navigation list to appear as tabs.
nav-link.active: This class is used to style the active tab link.
tab-content : This class is used to contain the content for the tabs.
tab-pane fade: This class is applied to each tab content div to create a fade effect when switching between tabs.
show: This class is used to make the content visible.
active: This class indicates that the content is the active tab.

Example: This example shows the implementation of the above-explained all classes.