DOCSEARCHbyAlgolia
Submit Docs

MDB UI Kit

repository·master·Indexed 12 days ago

https://github.com/mdbootstrap/mdb-ui-kit

A collection of over 700 Bootstrap 5 components and templates designed with Material Design principles. Version 9.3.0 is built with plain JavaScript and includes extended components for forms, navigation, and layout, as well as utilities for DOM manipulation, event handling, and focus trapping.

Tokens
19.5K
Snippets
57
Records
88
Agent score
97%

What's inside MDB UI Kit

  1. Explore Free Bootstrap 5 Templates with MDB5

    master
    MDB5 UI KIT (Material Design for Bootstrap 5) provides a variety of free, MIT-licensed templates that can be used to jumpstart different types of web projects. These templates are built using MDB5 components and are available for various use cases including e-commerce, portfolios, blogs, and admin dashboards.

  2. MDB 5 UI Kit Component Overview

    master

    MDB 5 UI Kit provides a wide range of pre-built Bootstrap 5 components for rapid UI development. Key component categories include:

    • Layout & Containers: Cards (flexible content containers with headers, footers, and contextual colors) and Footers (navigation components for links, company info, and copyrights).
    • Navigation: Tabs (quasi-navigation for clarity), ScrollSpy (automatically updates navigation based on scroll position), and Footers.
    • Form Controls: Forms (various control styles and layouts) and Validation (HTML5 and custom JavaScript-based feedback).
    • Interactive Components: Carousel (slideshow for images or text), Modal (dialogs for lightboxes or notifications), and Hover Effects (interactive cursor-based animations).
    • Feedback & Indicators: Spinners (loading indicators built with HTML/CSS, no JS required) and Notes (small components for additional information).

  3. Explore MDB UI Kit Extended Components

    master
    MDB UI Kit provides a wide range of extended Bootstrap 5 components and UI patterns beyond the standard library. These include specialized forms (Address, Credit Card, Payment, Registration, Survey), complex layouts (Mega Menu, Side Navbar, Sidebar, Drawer, Offcanvas), and interactive elements (Chat, Timeline, To-Do List, Video Carousel, Expanding Search Bar).

  5. Use MDB ScrollSpy for active navigation tracking

    master
    ScrollSpy automatically updates Bootstrap navigation or list group components based on the user's scroll position. This indicates which link is currently active in the viewport, helping users understand their location within a long page.

  6. Access MDB5 Documentation

    master

    The official documentation for MDB5 (Material Design for Bootstrap 5) can be found at the link below. Use this resource to find detailed guides, component specifications, and implementation examples for all 700+ components.

    https://mdbootstrap.com/docs/standard/

  7. Install with MDBGO

    master

    MDBGO provides a managed hosting environment with several integrated features:

    • Free hosting and SSL support
    • WordPress support
    • Custom domains
    • Free database
    • Frontend & backend templates
    • Webpack starter included
    • Git repository, FTP, and Jenkins support

    Visit mdbgo.com to get started.

  11. Trigger button toggling via Data API

    master

    You can enable automatic button toggling without writing custom JavaScript by using the data-bs-toggle="button" attribute on your HTML elements. The component listens for clicks on these elements and automatically invokes the toggle() method.

    <button type="button" class="btn" data-bs-toggle="button">Toggle Button</button>

  12. How Tooltips and Popovers work together

    master

    Tooltips and Popovers share a common base logic. A Tooltip is a specialized version of a Popover designed for brief, non-interactive text. Both use a TemplateFactory to manage content injection and a Popper instance to handle positioning relative to a reference element.

    When a tooltip is triggered, it calculates its position based on the placement option and the available viewport space (using the flip modifier). If the tooltip content is updated via setContent, the Popper instance is disposed and recreated to ensure correct positioning.