<!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>
<link href=
rel="stylesheet">
<script src=
</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=
Visit GeeksforGeeks
</a>
</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>