How to create a one-page scrolling website with Bootstrap
To create a single page scrolling website using Bootstrap, follow the following steps: 1. Set up an HTML infrastructure containing Bootstrap 5 CDN, and add scroll-behavior: smooth in CSS to achieve smooth scrolling; 2. Create a fixed navigation bar with links to the section IDs, such as #home, #about, etc.; 3. Build a full-screen block with unique IDs and .section classes, and use d-flex align-items-center to center the content vertically; 4. Optionally add data-bs-spy="scroll", data-bs-target=".navbar" and data-bs-offset="100" to enable Scrollspy to make the navigation bar automatically highlight the current section as it scrolls; 5. Perform responsive testing and adjust heights as needed or add animation effects to achieve a modern, concise and responsive single-page website.
Creating a one-page scrolling website with Bootstrap is a great way to build a clean, modern, and responsive site—perfect for portfolios, product pages, or landing pages. With Bootstrap 5 (the latest version), you can achieve smooth scrolling, navigation highlighting, and section anchoring with minimal custom code. Here's how to do it step by step.
1. Set Up the Basic HTML and Include Bootstrap
Start with a standard Bootstrap 5 template. You can use the CDN links for simplicity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>One-Page Scrolling Site</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS for smooth scrolling -->
<style>
html {
scroll-behavior: smooth;
}
.section {
height: 100vh;
padding: 100px 0;
}
</style>
</head>
<body>
<!-- Content will go here -->
</body>
</html>Note:
scroll-behavior: smoothenables smooth scrolling when jumping to sections. This is a simple CSS method—no JavaScript required.
2. Create the Navigation Bar with Scroll Links
Add a fixed-top navbar with links pointing to section IDs.
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">MySite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>The
href="#section-id"links will jump to matching section IDs. Since we usedscroll-behavior: smooth, the scroll will be animated.
3. Build Full-Screen Sections
Each section should have a unique ID that matches the nav links. Use the .section class for consistent height.
<section id="home" class="section bg-primary text-white d-flex align-items-center">
<div class="container text-center">
<h1>Welcome to My Site</h1>
<p>Scroll down to learn more</p>
</div>
</section>
<section id="about" class="section bg-light d-flex align-items-center">
<div class="container text-center">
<h2>About Us</h2>
<p>We are a creative team building awesome web experiences.</p>
</div>
</section>
<section id="services" class="section bg-white d-flex align-items-center">
<div class="container text-center">
<h2>Our Services</h2>
<p>Web Design, Development, SEO, and more.</p>
</div>
</section>
<section id="contact" class="section bg-dark text-white d-flex align-items-center">
<div class="container text-center">
<h2>Contact Us</h2>
<p>Get in touch via email or phone.</p>
</div>
</section>Using
d-flex align-items-centervertically centers content in each full-height section.
4. (Optional) Add Active State to Navigation on Scroll
To highlight the current section in the navbar as the user scrolls, you'll need a bit of JavaScript. Bootstrap's Scrollspy component makes this easy.
Add the data-bs-spy="scroll" attribute to the body or a wrapper:
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="100" class="scrollspy-example">
data-bs-target=".navbar"tells Scrollspy which navigation to update.data-bs-offset="100"sets the offset from the top (helpful if your navbar is 100px tall).
Make sure your navbar links are within a .navbar container, which we already have.
5. Final Touches
- Test responsiveness : Make sure the mobile toggle works.
- Adjust section height : You can tweak
height: 100vhor usemin-vh-100if content overflows. - Add animations (optional) : Use AOS (Animate On Scroll) or similar libraries for fade-in effects.
Example with Bootstrap's utility classes:
<div class="animate__animated animate__fadeIn" data-aos="fade-up"> <h2>About</h2> </div>
Summary of Key Points
- Use
scroll-behavior: smoothfor smooth scrolling. - Link navbar items to section IDs with
href="#id". - Give each section a unique ID and consistent height (eg,
100vh). - Use Bootstrap's Scrollspy to activate nav items on scroll.
- Keep it responsive with Bootstrap's grid and utility classes.
That's it. You now have a fully functional one-page scrolling website using Bootstrap. No heavy frameworks or complex JavaScript needed—just clean, semantic HTML and a few smart Bootstrap features.
The above is the detailed content of How to create a one-page scrolling website with Bootstrap. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undresser.AI Undress
AI-powered app for creating realistic nude photos
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Popular tool
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
20519
7
13632
4
How to animate Bootstrap components for a more dynamic feel? (Advanced CSS)
Mar 13, 2026 am 01:13 AM
The fade and show classes of Bootstrap5 are only status markers and do not contain animation logic. You need to manually add @keyframes or transitions to achieve fade-in and fade-out; custom components need to configure additional animation rules, and when JS controls the display, the show class must be added with delay to ensure redrawing.
How to ensure your Bootstrap site is fully accessible (WCAG)? (Accessibility)
Mar 08, 2026 am 01:25 AM
The Bootstrap component does not automatically add the aria attributes required for complete WCAG. You need to manually complete aria-expanded, role="dialog", aria-labelledby, etc.; the form must be equipped with an explicit label; :focus needs to use :focus-visible to ensure that the keyboard focus is visible; the color contrast must reach 4.5:1.
How to create a professional-looking landing page with Bootstrap? (Project-Based)
Mar 10, 2026 am 12:22 AM
Bootstrap’sdefaultstylingfeelsgenericduetouncustomizedspacing,typography,andcolor—fixableviaCSSvariablesorSass,notdirectedits;avoidfixedwidths,misuseofgridclasses,andrender-blockingassetstoensureresponsivenessandfastLCP.
How to integrate Bootstrap with a JavaScript framework like React or Vue? (Integration)
Mar 12, 2026 am 01:22 AM
Only BootstrapCSS should be introduced in React/Vue instead of JS to avoid global style pollution and jQuery dependency; SCSS modules should be imported on demand to reduce the size; interactive functions must be imported with encapsulation libraries (such as react-bootstrap) or ESM; grid classes need to adapt to JSX/Vue syntax, and explicit and implicit classes should be used with SSR with caution.
How to properly install and set up Bootstrap 5 in your web project? (Getting Started)
Mar 16, 2026 am 12:40 AM
To correctly introduce Bootstrap5, you need to load bootstrap.min.css first, then load bootstrap.bundle.min.js (including Popper), and ensure that the viewport tag exists; after npm installation, you need to manually introduce compiled files in the dist directory. SCSS customization must be preceded by variable declarations, and JS components must be explicitly initialized to avoid jQuery contamination.
How to implement a carousel or image slider with Bootstrap? (Content Display)
Mar 07, 2026 am 01:01 AM
Need not. Bootstrap5's carousel is automatically initialized by default. You need to manually call newbootstrap.Carousel() only when data-bs-ride is modified or the element is dynamically inserted.
How to use Bootstrap utility classes to speed up your workflow? (Efficiency)
Mar 11, 2026 am 12:18 AM
Use mt-3 to represent the top margin, mb-3 to represent the bottom margin, and the suffixes t/b/s/e correspond to top/bottom/start/end respectively; ms-auto implements right alignment in the flex container, me-2 replaces the abandoned mr-2, and responsive classes such as mt-md-4 need to have breakpoint prefixes.
How to use Bootstrap variables to maintain a consistent color scheme? (Branding)
Mar 14, 2026 am 12:59 AM
The safest way is to redefine Bootstrap's Sass variables (such as $primary, $primary-rgb, $primary-text-emphasis) in advance and introduce them before @import "bootstrap/scss/variables" to ensure that all dependent variables are updated synchronously to avoid compilation failure or style exceptions.
