Section 1
This is the content for Section 1.
Section 2
This is the content for Section 2.
Section 3
This is the content for Section 3.
Section 4
This is the content for Section 4.
Section 5
This is the content for Section 5.
Scrollspy is a Bootstrap feature that automatically updates navigation links based on the scroll position of the page. It allows users to see which section of content they are currently viewing, enhancing navigation on long pages.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Toast Examples</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h4>Example of Scrollspy</h4>
<div class="row">
<nav id="navbar-example" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky">
<h4 class="fw-bold">Scrollspy Example</h4>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section4">Section 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section5">Section 5</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-4">
<section id="section1">
<h2>Section 1</h2>
<p>This is the content for Section 1.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is the content for Section 2.</p>
</section>
<section id="section3">
<h2>Section 3</h2>
<p>This is the content for Section 3.</p>
</section>
<section id="section4">
<h2>Section 4</h2>
<p>This is the content for Section 4.</p>
</section>
<section id="section5">
<h2>Section 5</h2>
<p>This is the content for Section 5.</p>
</section>
</main>
</div>
<h4>Customizing Scrollspy</h4>
<p>Bootstrap's Scrollspy is highly customizable. You can modify:</p>
<ul>
<li><strong>Target Element:</strong> Change the element that triggers Scrollspy using the <code>data-bs-target</code> attribute.</li>
<li><strong>Offset:</strong> Adjust the offset of the scroll position using the <code>data-bs-offset</code> attribute to account for fixed headers.</li>
<li><strong>Styles:</strong> Customize the styles of the active link in your CSS to match your design needs.</li>
</ul>
<h4>Best Practices for Using Scrollspy</h4>
<ul>
<li><strong>Keep Sections Concise:</strong> Ensure that each section is clear and provides value to the user.</li>
<li><strong>Limit Sections:</strong> Too many sections can overwhelm users; aim for a manageable number of sections.</li>
<li><strong>Responsive Design:</strong> Ensure that your layout looks good on both desktop and mobile devices.</li>
<li><strong>Accessibility:</strong> Consider users with disabilities and ensure that navigation is clear and easy to use.</li>
</ul>
</div>
<script>
// Function to show Toasts
function showToast(toastId) {
var toast = document.getElementById(toastId);
var bsToast = new bootstrap.Toast(toast);
toast.style.display = 'block'; // Show the toast
bsToast.show(); // Trigger Bootstrap toast
// Auto hide after 3 seconds
setTimeout(() => {
bsToast.hide();
toast.style.display = 'none'; // Hide the toast
}, 3000);
}
// Event listeners for buttons
document.getElementById('successToastBtn').addEventListener('click', () => showToast('successToast'));
document.getElementById('errorToastBtn').addEventListener('click', () => showToast('errorToast'));
document.getElementById('infoToastBtn').addEventListener('click', () => showToast('infoToast'));
document.getElementById('warningToastBtn').addEventListener('click', () => showToast('warningToast'));
document.getElementById('customToastBtn').addEventListener('click', () => showToast('customToast'));
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
This is the content for Section 1.
This is the content for Section 2.
This is the content for Section 3.
This is the content for Section 4.
This is the content for Section 5.
Bootstrap's Scrollspy is highly customizable. You can modify:
data-bs-target attribute.data-bs-offset attribute to account for fixed headers.