Hi everyone! I am just starting out in front-end development and I was hoping to get some clarification on a topic. I need to create a one-page website where the navigation bar links scroll down to the correct sections when clicked. It's all on one page.
My question is, how can I implement a nav bar using Bootstrap 5 and/or an external CSS stylesheet aligned to the right side with elements like "About Me," "Random Facts," "Skills," "Portfolio," and "Contact Me"? When someone clicks on, for example, "Random Facts," it should smoothly scroll down to that section.
Also, I would like to understand the difference between:
and a standard anchor tag such as:
<a class="nav-link active" aria-current="page" href="#"> </a>
.<a class="nav-link" href="#"></a>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fabian Zaiser</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Random Facts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
This is what I have set up so far. Thank you all in advance for your help!