<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
<script>
$(function(){
$('#work').on('activate.bs.scrollspy')
});
</script>
<style>
body
{
position: relative;
}
</style>
</head>
<body class="m-2">
<h1 class="ms-5 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-5 ">Bootstrap 5 Scrollspy with nested nav
</h4>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target=".nav-col" aria-controls="navbarToggleExternalContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="collapse container-fluid navbar
navbar-expand-sm navbar-dark bg-dark nav-col" id="scrollspy">
<a class="nav-link active" href="#dataStructs">
Data Structures</a>
<a class="nav-link" href="#algo">
Algorithms</a>
<nav class="navbar" id="scrollspy">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle ms-4 my-1"
type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
aria-expanded="false" href="#other">
Nested Navbar
</button>
<ul class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton1">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="scrollspy">
<a class="nav-link ms-3 my-1" href="#bootstrap">
Bootstrap</a>
<a class="nav-link ms-3 my-1" href="#cpp">
C++</a>
</nav>
</ul>
</div>
</nav>
</nav>
</div>
</nav>
<div class="container-fluid p-5 pt-2" data-spy="scroll" data-target="#scrollspy" data-offset="50">
<div class="">
<div id="dataStructs">
<h2>Data Structures</h2>
<p>
A data structure is a group of data elements
that provides the easiest way to store and
perform different actions on the data of the computer.
A data structure is a particular way of organizing data
in a computer so that it can be used effectively.
</p>
</div>
<div id="algo">
<h2>Algorithms</h2>
<p>
The word Algorithm means ”
A set of finite rules or instructions to be followed
in calculations or other problem-solving operations ”
Or ” A procedure for solving a mathematical problem
in a finite number of steps that frequently involves
recursive operations”..</p>
</div>
<div id="other">
<h1>Others</h1>
</div>
<div id="bootstrap">
<h2>Bootstrap</h2>
<p>
Bootstrap is a free and open-source
collection of CSS
and JavaScript/jQuery code used for creating
dynamic websites layout and web applications.
</p>
</div>
<div id="cpp">
<h2>C++</h2>
<p>
C++ is a general-purpose programming language
and is widely used nowadays for competitive programming.
It has imperative, object-oriented and generic programming
features. </p>
</div>
</div>
</div>
</body>
</html>