DOCSEARCHbyAlgolia
Submit Docs

Play Bootstrap Template

repository·main·Indexed 20 days ago

https://github.com/uideck/play-bootstrap

A free, open-source Bootstrap 5-based HTML template for startups, SaaS, and business landing pages. Built using TailGrids UI components, it includes pre-made pages for blogs and login screens, along with built-in JavaScript for smooth scrolling, sticky headers, and mobile navbar management.

Tokens
650
Snippets
1
Records
6
Agent score
21%

What's inside play-bootstrap

  1. Overview of Play Bootstrap Template

    main

    Play is a free, open-source HTML template built on Bootstrap 5. It is designed for creating landing pages and websites for SaaS, Startups, Businesses, Apps, Software, and Agencies.

    Key features include:

    • Essential website sections and elements.
    • Pre-built pages such as Blogs, Login, and 404 error pages.
    • Designed using TailGrids UI components.

  3. Manage Navbar collapse and Submenus

    main

    The template provides automatic handling for mobile navigation and nested menus:

    • Navbar Collapse: Clicking elements with the class .ud-menu-scroll (typically anchor links in a navigation menu) will automatically remove the active class from .navbar-toggler and the show class from .navbar-collapse, effectively closing the mobile menu.
    • Submenus: For navigation items with the class .nav-item-has-children, clicking the link will toggle the show class on the associated .ud-submenu element.

  4. Automatic UI behaviors for Sticky Header and Back-to-Top

    main

    The template includes built-in scroll listeners that manage several UI states automatically:

    1. Sticky Header: When the user scrolls past the .ud-header offset, the class sticky is added to the header. This is used to trigger styling changes.
    2. Logo Swapping: When the header becomes sticky, the logo source is automatically updated to assets/images/logo/logo-2.svg. Otherwise, it uses assets/images/logo/logo.svg.
    3. Back-to-Top Button: A button with the class .back-to-top will automatically show (display: flex) when the user has scrolled more than 50px down, and hide (display: none) otherwise.

  6. Smooth scroll to an element with scrollTo()

    main

    The scrollTo function provides a smooth animated scrolling effect to a specific target position within a given element. It uses a quadratic easing function (easeInOutQuad) to ensure the motion is fluid rather than linear.

    Parameters:

    • element: The DOM element to scroll.
    • to: The target scroll position (defaults to 0).
    • duration: The animation duration in milliseconds (defaults to 500).
    // Example: Scroll to the top of the document over 1000ms
scrollTo(document.documentElement, 0, 1000);