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