Top Sites>MDB - Material Design for Bootstrap 5 & 4

User-agent: * 

Disallow: */thank-you/
Disallow: */index-js/
Disallow: */index-ss/
Disallow: */_blank/
Disallow: */tags/
Disallow: */categories/
Disallow: /wp-admin/
Disallow: /user/
Disallow: /profile/

Allow: /

User-agent: GPTBot
Allow: /
User-agent: ChatGPT-User
Allow: /
User-agent: anthropic-ai
Allow: /
‍User-agent: Claude-Web
Allow: /
User-agent: ClaudeBot
Allow: /
User-agent: PerplexityBot
Allow: /
User-agent: CCBot
Allow: /
User-agent: Google-Extended
Allow: /

Sitemap: https://mdbootstrap.com/sitemap_forum.xml
Sitemap: https://mdbootstrap.com/sitemap_snippets.xml
Sitemap: https://mdbootstrap.com/api/docs/content/sitemap.xml

# MDBootstrap

MDBootstrap is a comprehensive UI kit based on Bootstrap 5, offering a wide range of components and templates to enhance web development projects.

## Getting Started
- [About MDB](https://mdbootstrap.com/docs/standard/): Standard Bootstrap version built with plain JS
- [Installation](https://mdbootstrap.com/docs/standard/getting-started/installation/): Material Design for Bootstrap is free to download. Install via npm, CDN, MDB CLI, from GitHub or download as a .zip package.
- [Tutorials](https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/): This beginner-friendly, example-based course will guide you through the essential knowledge of our ecosystem. 
- [Optimization](https://mdbootstrap.com/docs/standard/getting-started/optimization/): This guide describes in detail the different ways to optimize project by reducing the amount of imported resources.
- [Changelog](https://mdbootstrap.com/docs/standard/getting-started/changelog/): This is a changelog of Material Design for Bootstrap - a free, MIT-licensed UI Kit for the latest Bootstrap 5.
- [Migrating to v7](https://mdbootstrap.com/docs/standard/getting-started/migration-guide/): How to migrate to new version of MDBootstrap with unified data attribute init.
- [Supported Browsers](https://mdbootstrap.com/docs/standard/getting-started/supported-browsers/): MDBootstrap supports the latest, stable releases of all major browsers and platforms.
- [Updates](https://mdbootstrap.com/docs/standard/getting-started/updates/): MDB PRO is usually updated every two weeks. Learn how to update your MDB PRO project manually, via npm or with MDB CLI.
- [VSC snippets](https://mdbootstrap.com/docs/standard/getting-started/vsc-snippets/): Visual Studio Code snippets for Bootstrap with Material Design. Speed up your workflow with Bootstrap with this VS code shortcuts.
- [RTL](https://mdbootstrap.com/docs/standard/getting-started/rtl/): This article will teach you how to enable Right-to-Left features in your project. You can start using directional classes with the latest Bootstrap 5.
- [Internationalization (i18n)](https://mdbootstrap.com/docs/standard/getting-started/internationalization/): This article will teach you how to integrate i18n with your project. You can start using directional classes with the latest Bootstrap 5.
- [Webpack](https://mdbootstrap.com/docs/standard/getting-started/webpack-integration/): Include Bootstrap in your project using WebPack. Download a starter boilerplate for Bootstrap and Material Design.
- [Vite](https://mdbootstrap.com/docs/standard/getting-started/vite-integration/): Include Bootstrap in your project using Vite. Download a starter boilerplate for Bootstrap and Material Design.
- [Parcel](https://mdbootstrap.com/docs/standard/getting-started/parcel-integration/): Include Bootstrap in your project using Parcel. Download a starter boilerplate for Bootstrap and Material Design.
- [Gulp](https://mdbootstrap.com/docs/standard/getting-started/gulp-integration/): This guide will walk you through steps necessary to include MDB package in your project using Gulp.
- [Free starter templates](https://mdbootstrap.com/freebies/): Collection of open-source, MIT-licensed starter templates & themes for the latest Bootstrap 5 - Free Admin Dashboard, eCommerce, Landing Page, Blog, Portfolio and many more.

## MDB Pro
- [Buy MDB Pro](https://mdbootstrap.com/docs/standard/pro/): Premium UI Kit for the latest Bootstrap 5. Add Material Design styles to a Bootstrap project with ease. High quality of 5000+ premium components, thousands of templates, plugins, design blocks.
- [Installation](https://mdbootstrap.com/docs/standard/pro/installation/): This guide will teach you how to install MDB 5 PRO. You can get it in a .zip package, via npm, or with free hosting in MDB CLI.
- [Plugins installation](https://mdbootstrap.com/docs/standard/pro/plugins-installation/): This guide will teach you how to add premium plugins to your MDB 5 PRO new or preexisting project. Add Bootstrap plugins manually or via npm.
- [Quick start](https://mdbootstrap.com/docs/standard/pro/quick-start/): Start using MDBootstrap PRO in your projects with this simple tutorial. Install MDB via CLI, npm, or manually with a .zip package.
- [FAQ](https://mdbootstrap.com/docs/standard/pro/faq/): Frequently asked questions
- [Git & repository](https://mdbootstrap.com/docs/standard/pro/git/): This tutorial will teach you how to access MDB PRO git repository. Install MDBootstrap with npm from GitLab.
- [Premium support](https://mdbootstrap.com/docs/standard/pro/support/): MDB PRO comes with 12-months of Premium Support. Learn how to use Premium Support in the most efficient way.
- [Updates](https://mdbootstrap.com/docs/standard/pro/updates/): MDB PRO is usually updated every two weeks. Learn how to update your MDB PRO project manually, via npm or with MDB CLI.
- [Enterprise & Resellers](https://mdbootstrap.com/docs/standard/pro/enterprise/): Looking for enterprise-grade frontend solutions? That's what we've been doing for the last 9 years.

## Integrations
- [Express.js](https://mdbootstrap.com/docs/standard/integrations/expressjs/): This guide will provide you with a free template for a Express.js application, with MongoDB database and Bootstrap 5 front-end.
- [Laravel](https://mdbootstrap.com/docs/standard/integrations/laravel/): This guide will provide you with a free template for a Laravel application, with MySQL database and Bootstrap 5 front-end.
- [ASP.NET](https://mdbootstrap.com/docs/standard/integrations/aspnet/): This guide will provide you with a free template for a .NET core + ASP.NET application, with MongoDB database and Bootstrap 5 front-end.
- [Django](https://mdbootstrap.com/docs/standard/integrations/django/): This guide will provide you with a free template for a Django application, with MySQL database and Bootstrap 5 front-end.
- [Flask](https://mdbootstrap.com/docs/standard/integrations/flask/): This guide will provide you with a free template for a Flask application, with MySQL database and Bootstrap 5 front-end.
- [Ruby on Rails](https://mdbootstrap.com/docs/standard/integrations/rails/): This guide will provide you with a free template for a Ruby on Rails application, with MySQL database and Bootstrap 5 front-end.
- [Blazor](https://mdbootstrap.com/docs/standard/integrations/blazor/):This article shows you how to integrate Blazor frontend application with MDB Standard UI Kit. 

## Layout
- [Grid system](https://mdbootstrap.com/docs/standard/layout/grid/): Responsive grid built with the latest Bootstrap 5. Grid is a system for building mobile-first layouts with flexbox containers, rows & columns.
- [Breakpoints](https://mdbootstrap.com/docs/standard/layout/breakpoints/): Bootstrap 5 breakpoints are customizable widths that determine how your responsive layout behaves. They respond to different viewport sizes.
- [Containers](https://mdbootstrap.com/docs/standard/layout/containers/): Container is a fundamental building block required in the latest Bootstrap 5. It allows building responsive layouts in seconds.
- [Columns](https://mdbootstrap.com/docs/standard/layout/columns/): Bootstrap 5 columns are crucial building blocks required when using grid systems. Column usage enables responsive layouts.
- [CSS Grid](https://mdbootstrap.com/docs/standard/layout/css-grid/): Responsive display utility built with the latest Bootstrap 5. CSS Grid is an easy way to control the grid in Bootstrap using wrapping, nesting, and customization.
- [Display](https://mdbootstrap.com/docs/standard/layout/display/): Responsive display utility allows toggling the display value of the element. It is an easy way to control visibility of an element in Bootstrap 5.
- [Flexbox](https://mdbootstrap.com/docs/standard/layout/flexbox/): Bootstrap 5 flex utility allows managing the responsive layout. Control alignment & sizing of elements such as grid, navigation, components, and others.
- [Float](https://mdbootstrap.com/docs/standard/layout/float/): Float is a utility of Bootstrap 5, that aligns elements to the left or right side of the viewport. You can use it across any breakpoint, using our responsive utilities.
- [Gutters](https://mdbootstrap.com/docs/standard/layout/gutters/): Bootstrap Gutters are the padding between your columns and rows. Gutters enable responsive spacing and alignment in Bootstrap 5.
- [Horizontal alignment](https://mdbootstrap.com/docs/standard/layout/horizontal-alignment/): Bootstrap 5 horizontal alignment utilities position elements on the x-axis. Center your content with it or align it to the start or the end of the viewport (left alignment / right alignment}.
- [Utilities for layout](https://mdbootstrap.com/docs/standard/layout/utilities-for-layout/): Bootstrap 5 utilities for responsive layouts allow modification of display, flexbox, margin & padding. 
- [Vertical alignment](https://mdbootstrap.com/docs/standard/layout/vertical-alignment/): Bootstrap 5 vertical alignment utilities position elements on the y-axis. You can center your content with it or align it to the top or the bottom of the viewport.
- [Z-index](https://mdbootstrap.com/docs/standard/layout/z-index/): Bootstrap 5 z-index utility allows you to make sure that it is visible only when needed. You can set different indexes for different breakpoints.

## Content & Styles
- [Theme](https://mdbootstrap.com/docs/standard/content-styles/theme/): Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
- [Animations](https://mdbootstrap.com/docs/standard/content-styles/animations/): Bootstrap 5 animations imitate motions for web elements. +70 animations generated by CSS only, work on every browser.
- [Background image](https://mdbootstrap.com/docs/standard/content-styles/background-image/): Learn how to create a responsive background image with the newest Bootstrap 5. Many examples and ready-to-use solutions
- [Colors](https://mdbootstrap.com/docs/standard/content-styles/colors/): Colors for the latest Bootstrap 5. Color picker, style form, colors palette, hex, guide & many more.
- [CSS Variables](https://mdbootstrap.com/docs/standard/content-styles/css-variables/): CSS variables built with the latest Bootstrap 5. Use Bootstrap CSS component, root & SCSS variables for fast and forward-looking design and development.
- [Dividers](https://mdbootstrap.com/docs/standard/content-styles/dividers/): Divider lines for Bootstrap 5 layouts. Examples of horizontal divider lines (hr) as well as vertical divider lines for clearer organization of your content.
- [Figures](https://mdbootstrap.com/docs/standard/content-styles/figures/): Bootstrap figures are used for displaying related images and text with the figure component in MDB, i.e. for image with captions
- [Flags](https://mdbootstrap.com/docs/standard/content-styles/flags/): You can represent a political state in Bootstrap 5 with flags. 190+ countries available.
- [Hover effects](https://mdbootstrap.com/docs/standard/content-styles/hover-effects/): Bootstrap 5 hover effect adds interactions when the coursor is over the element.
- [Icons](https://mdbootstrap.com/docs/standard/content-styles/icons/): Huge collection of over  1,500+ responsive icons for Bootstrap 5. A library of well organized and easy to use icons which allow you to visualize anything.
- [Images](https://mdbootstrap.com/docs/standard/content-styles/images/): Responsive images with the latest Bootstrap 5. Make every image mobile-friendly with a use of a single class.
- [Masks](https://mdbootstrap.com/docs/standard/content-styles/masks/): Masks alter the visibility of an element by either partially or fully hiding it. Masks are used to make content more visible by providing a proper contrast. They are most often used on images.
- [Reboot](https://mdbootstrap.com/docs/standard/content-styles/reboot/): Bootstrap 5 reboot is the style and appearance of headings, lists, body text and basic paragraphs. See 14 examples with detailed descriptions.
- [Shadows](https://mdbootstrap.com/docs/standard/content-styles/shadows/): Bootstrap 5 shadow is an effect used in web elements which provides important visual cues about objects depth and directional movement. Examples with card, image shadow and shadow on hover.
- [Typography](https://mdbootstrap.com/docs/standard/content-styles/typography/): Bootstrap 5 typography is the style and appearance of headings, lists, body text and basic paragraphs. See 14 examples with detailed descriptions.

## Navigation
- [Breadcrumb](https://mdbootstrap.com/docs/standard/navigation/breadcrumb/): Responsive Breadcrumbs built with the latest Bootstrap 5. Examples including different styles, separators, breadcrumbs in navbar and more.
- [Footer](https://mdbootstrap.com/docs/standard/navigation/footer/): Responsive Footers built with Bootstrap 5. Free footer templates with different options like bottom fixed footer, sticky footer, social media, cards and more. 
- [Headers](https://mdbootstrap.com/docs/standard/navigation/headers/): Responsive Headers built with Bootstrap 5. Examples of fixed header, header sticky on scroll, with background image, jumbotron & more.
- [Navbar](https://mdbootstrap.com/docs/standard/navigation/navbar/): Responsive Navbar with Bootstrap 5. Examples with logo, dropdown, collapse, sticky header, toolbar, search bar in nav & hamburger icon. Align to the left, right or center. 
- [Pagination](https://mdbootstrap.com/docs/standard/navigation/pagination/): Responsive pagination and pager built with Bootstrap 5.With this component, you can spread your content over many pages. Learn how to build pagination with free code examples.
- [Pills](https://mdbootstrap.com/docs/standard/navigation/pills/): Responsive Pills built with Bootstrap 5. Bootstrap navs like tabs or pills help to organize content on a page. Learn how to use pills in the navbar, in content, in cards, and with different colors and styling options.
- [Scrollspy](https://mdbootstrap.com/docs/standard/navigation/scrollspy/): Responsive Scrollspy built with Bootstrap 5. Highlight where the user is on a page by updating links in navigation based on scroll postion. Works perfectly with smooth scroll.
- [Sidenav](https://mdbootstrap.com/docs/standard/navigation/sidenav/): Responsive side menu built with Bootstrap 5. Examples of sidebar of collapse panel, drawer, offcanvas side navbar, slim, with accordion, inner scroll & more.
- [Tabs](https://mdbootstrap.com/docs/standard/navigation/tabs/): Responsive Tabs built with Bootstrap 5. Examples of vertical tabs, tab panel, tabs justified, filled, with buttons, and many other variations of the navs.

## Components
- [Accordion](https://mdbootstrap.com/docs/standard/components/accordion/): Responsive accordion built with the latest Bootstrap 5. Accordion is a vertically collapsing element to show and hide content via class changes.  
- [Alerts](https://mdbootstrap.com/docs/standard/components/alerts/): Responsive Alerts built with the latest Bootstrap 5. Alerts provide contextual feedback messages for typical user actions with a handful of responsible and flexible alert boxes.
- [Badges](https://mdbootstrap.com/docs/standard/components/badges/): Responsive Badges built with the latest Bootstrap 5. Badges add extra information like count or label to any content. Use counters, icons, or labels. Many examples and easy tutorial.
- [Buttons](https://mdbootstrap.com/docs/standard/components/buttons/): 
- [Button group](https://mdbootstrap.com/docs/standard/components/button-group/): Responsive Buttons built with Bootstrap 5. Multiple predefined button style classes: button link, outline, round button, social, floating, fixed & more
- [Cards](https://mdbootstrap.com/docs/standard/components/cards/): Responsive cards built with the latest Bootstrap 5. Card is a responsive content container with an extensible option for headers, footers, images, and a wide variety of content. Many examples and tutorials. 
- [Carousel](https://mdbootstrap.com/docs/standard/components/carousel/): Responsive carousel built with the latest Bootstrap 5. Carousel is a slideshow cycling through different elements such as photos, videos, or text. Many examples and easy tutorials.
- [Chips](https://mdbootstrap.com/docs/standard/components/chips/): Responsive chips built with the latest Bootstrap 5. Chips (aka tags) make it easier to categorize content and browse ie. through different articles from the same category. 
- [Collapse](https://mdbootstrap.com/docs/standard/components/collapse/): Responsive collapse built with Bootstrap 5. Collapse panel, vertical collapse, collapsing divs, data-toggle usage, collapse button & more.
- [Dropdowns](https://mdbootstrap.com/docs/standard/components/dropdowns/): Responsive dropdown/caret built with Bootstrap 5. Examples of navbar dropdown, dropdown list, submenu, dropdown toggle, dropdown hover, hamburger icon & more.
- [Lightbox](https://mdbootstrap.com/docs/standard/components/lightbox/): Responsive lightbox built with the latest Bootstrap 5. Lightbox is a responsive gallery with the option to enlarge selected photos.
- [List group](https://mdbootstrap.com/docs/standard/components/list-group/): Responsive list groups built with the latest Bootstrap 5. List groups are responsive components for displaying a series of content. A beautiful alternative to unordered lists.
- [Modal](https://mdbootstrap.com/docs/standard/components/modal/): Responsive popup window with Bootstrap 5. Examples of with image, modal position i.e. center, z-index usage, modal fade animation, backdrop usage, modal size & more. 
- [Placeholders](https://mdbootstrap.com/docs/standard/components/placeholders/): Responsive Placeholder built with the latest Bootstrap 5. Use, and customize our alternate layout system built on CSS Grid. Change its width, color, sizing, and use as animation.
- [Popconfirm](https://mdbootstrap.com/docs/standard/components/popconfirm/): Responsive popconfirm built with the latest Bootstrap 5. Popconfirm is a compact dialog alert.  Use it to confirm/cancel a decision or display extra content like an explanation.
- [Popovers](https://mdbootstrap.com/docs/standard/components/popovers/): Responsive popover built with the latest Bootstrap 5. Popover is like a tooltip, but it can persist after hovering off. It allows displaying more content including header & footer.
- [Progress](https://mdbootstrap.com/docs/standard/components/progress/): Responsive progress bar built with the latest Bootstrap 5. Progress bar is an indicator showing the completion progress, i.e. task or time. Use it with percents, steps & other options.
- [Rating](https://mdbootstrap.com/docs/standard/components/rating/): Responsive star rating built with the latest Bootstrap 5. Rating provides insight into others opinions and experiences with a product. Use stars or other custom symbols (i.e. smiling faces)
- [Spinners](https://mdbootstrap.com/docs/standard/components/spinners/): Responsive loading spinners for Bootstrap 5. Display a spinning circle border to indicate further action, i.e. an input spinner after form submission.
- [Stepper](https://mdbootstrap.com/docs/standard/components/stepper/): Responsive stepper built with Bootstrap 5. Form wizard, vertical stepper, multi step form validation, optional step, mobile stepper & more
- [Toasts](https://mdbootstrap.com/docs/standard/components/toasts/): Bootstrap Toast component is a non-disruptive message in the corner of the interface.  It provides quick "at-a-glance" feedback on the outcome of an action.
- [Tooltips](https://mdbootstrap.com/docs/standard/components/tooltips/): Bootstrap Tooltip displays informative text when users hover, focus, or tap an element. They display text tips next to the element in question.

## Forms
- [Overview](https://mdbootstrap.com/docs/standard/forms/overview/): Responsive forms built with the latest Bootstrap 5. Create a wide variety of login, register, contact forms & more.
- [Autocomplete](https://mdbootstrap.com/docs/standard/forms/autocomplete/):Autocomplete built with the latest Bootstrap 5. Automatically suggest option while click on form to faster complete search 
- [Checkbox](https://mdbootstrap.com/docs/standard/forms/checkbox/): Checkboxes built with the latest Bootstrap 5. A select component used in forms & surveys. It enables choosing one or several options in a list.
- [Datepicker](https://mdbootstrap.com/docs/standard/forms/datepicker/): Responsive Datepicker built with the latest Bootstrap 5. A plugin that adds date picker functionality without custom JS code. It supports internationalization, different formats & customization options.
- [DateTimepicker](https://mdbootstrap.com/docs/standard/forms/datetimepicker/): Responsive DateTime picker built with the latest Bootstrap 5. Selects specific date & time, or date range.  Used with bookings, schedules, event calendars. Easy to customize.
- [File](https://mdbootstrap.com/docs/standard/forms/file/): File input built with the latest Bootstrap 5. Examples of uploading single or multiple elements. Supports images, files, and documents. Add items directly from your local storage.
- [Input fields](https://mdbootstrap.com/docs/standard/forms/input-fields/): Responsive Input fields built with the latest Bootstrap 5. Get data from the users in password inputs, textarea, email fields, delete / clear button & more.
- [Input group](https://mdbootstrap.com/docs/standard/forms/input-group/): RResponsive Input group built with the latest Bootstrap 5. Extends an input by adding an icon, text, button, or a button group you can place on both sides of an input.
- [Multi range](https://mdbootstrap.com/docs/standard/forms/multi-range-slider/): Multi-range component built with the latest Bootstrap 5. Shift possible values spread over the desired range.
- [Search](https://mdbootstrap.com/docs/standard/forms/search/): Search bar built with the latest Bootstrap 5. Many examples of search inputs. Integrated with components such as navbar, dropdown, data tables, and more.
- [Select](https://mdbootstrap.com/docs/standard/forms/select/): Responsive select input built with Bootstrap 5. Choose from many options displayed in a collapsible/drop-down list of values with selectpicker component.
- [Switch](https://mdbootstrap.com/docs/standard/forms/switch/): Toggle Switch button built with the latest Bootstrap 5. Learn how to use on / off input and disabled state.
- [Radio](https://mdbootstrap.com/docs/standard/forms/radio/): Radio buttons built with the latest Bootstrap 5. Limits the user to one selection, from a list of preset options. The singular property of a radio button makes it distinct from a checkbox.
- [Range](https://mdbootstrap.com/docs/standard/forms/range/): Range built with the latest Bootstrap 5. Pick values from a range, using a customizable slider.
- [Timepicker](https://mdbootstrap.com/docs/standard/forms/timepicker/): Responsive time picker built with the latest Bootstrap 5. Select and set a specific time value from a pre-determined set in a popup panel.
- [Validation](https://mdbootstrap.com/docs/standard/forms/validation/): Validation for the latest Bootstrap 5 forms. Ensure that inputs are filled with a properly formatted value. Works with login, registration, and contact forms.

## Data
- [Charts](https://mdbootstrap.com/docs/standard/data/charts/): Responsive Charts built with the latest Bootstrap 5. Different types of data visualization - bar chart, line chart, pie chart radar chart, and many more.
- [Charts advanced](https://mdbootstrap.com/docs/standard/data/charts-advanced/): Advanced Charts built with the latest Bootstrap 5. Easy to customize advanced options for bar, line, pie and radar charts.
- [Tables](https://mdbootstrap.com/docs/standard/data/tables/): Responsive Tables built with the latest Bootstrap 5. Lots of responsive table usage & styling examples like bordered, striped, small, nested.
- [Datatables](https://mdbootstrap.com/docs/standard/data/datatables/): Datatables built with the latest Bootstrap 5. Advanced customization options for tables like searching, sorting, and pagination.

## Utilities
- [API](https://mdbootstrap.com/docs/standard/utilities/api/): Bootstrap 5 utility API. Override, modify or extend the existing utility classes, via a Sass-based tool.
- [Borders](https://mdbootstrap.com/docs/standard/utilities/borders/): Responsive borders with the latest Bootstrap 5. Style the border and border-radius of an element.
- [Clearfix](https://mdbootstrap.com/docs/standard/utilities/clearfix/): Clearfix for the latest Bootstrap 5. Clear floated content within a container by adding a clearfix utility.
- [Close button](https://mdbootstrap.com/docs/standard/utilities/close-button/): Close button for the latest Bootstrap 5. Component used to dismiss content of modals, alerts, and popovers.
- [Embeds](https://mdbootstrap.com/docs/standard/utilities/embeds/): Responsive ratio / embeds utilities for the latest Bootstrap 5. Embed media content such as YouTube video or images with a proper ratio.
- [Interactions](https://mdbootstrap.com/docs/standard/utilities/interactions/): Interactions built with the latest Bootstrap 5. Change the way in which the text is selected, add classes to prevent or add pointer actions.
- [Opacity](https://mdbootstrap.com/docs/standard/utilities/opacity/): Opacity built with the latest Bootstrap 5. Set the opacity level and describe the transparency level class for an element such as navbar, image, cards.
- [Overflow](https://mdbootstrap.com/docs/standard/utilities/overflow/): Overflow with the latest Bootstrap 5. Configure whether to clip the content or to add scrollbars when the content of an element is too big to fit in area.
- [Position](https://mdbootstrap.com/docs/standard/utilities/position/): Configure positions in Bootstrap 5 by aligning the content to the top, bottom, left (start}, right (end}, or center of a page. Learn how to easily arrange elements.
- [Screen readers](https://mdbootstrap.com/docs/standard/utilities/screen-readers/): Screen reader built with the latest Bootstrap 5. Restrict the display of items only to the screen readers, while hiding them on all other devices.
- [Sizing](https://mdbootstrap.com/docs/standard/utilities/sizing/): Sizing built with the latest Bootstrap 5. Classes to set up the width and height of an element. Supports 25%, 50%, 75% and 100%
- [Spacing](https://mdbootstrap.com/docs/standard/utilities/spacing/): Responsive spacing with the latest Bootstrap 5. Margin or padding values added to an element or a subset of its sides with simple classes.
- [Stacks](https://mdbootstrap.com/docs/standard/utilities/stacks/): Responsive stacks built with the latest Bootstrap 5. Stacks is a shortcut for applying a number of flexbox properties to quickly and easily create vertical and horizontal layouts.
- [Stretched link](https://mdbootstrap.com/docs/standard/utilities/stretched-link/): Stretched link built with the latest Bootstrap 5. Spreads the clickability of a link to the entire area of its containing block via CSS.
- [Text](https://mdbootstrap.com/docs/standard/utilities/text/): Text in the latest Bootstrap 5. Examples for common text utilities to control alignment, wrapping, weight, and more.
- [Text truncation](https://mdbootstrap.com/docs/standard/utilities/text-truncation/): Text truncate in the latest Bootstrap 5. Shorten text content so that it fits within a certain designated area.
- [Vertical rule](https://mdbootstrap.com/docs/standard/utilities/vertical-rule/): Vertical rule built with the latest Bootstrap 5. Create vertical dividers in common layouts, styled just like <hr> elements.
- [Visibility](https://mdbootstrap.com/docs/standard/utilities/visibility/): Visibility in the latest Bootstrap 5. Show and hide elements without modifying the display.

## Methods
- [Clipboard](https://mdbootstrap.com/docs/standard/methods/clipboard/): Copy to clipboard feature for the latest Bootstrap 5. Let your users easily copy text or links with one click.
- [Infinite scroll](https://mdbootstrap.com/docs/standard/methods/infinite-scroll/): Infinite scroll for the latest Bootstrap 5. JS plugin that loads more content when scroll position nears the bottom of the page.
- [Lazy loading](https://mdbootstrap.com/docs/standard/methods/lazy-loading/): Lazy loading for the latest Bootstrap 5. Load pictures, videos, text, and other types of content on scroll. etc. A great solution for large-size multimedia files.
- [Loading management](https://mdbootstrap.com/docs/standard/methods/loading-management/): Responsive loader for the latest Bootstrap 5. Loading management helps to display an animation while loading data.
- [Ripple](https://mdbootstrap.com/docs/standard/methods/ripple/): Waves animation for the latest Bootstrap 5. Change the color of the ripple, ripple duration time, the radius of the ripple in button or image.
- [Scrollbar](https://mdbootstrap.com/docs/standard/methods/scrollbar/): Scrollbar for the latest Bootstrap 5. Scroll up, down, left, or right a viewing area with a vertical or horizontal bar.
- [Smooth scroll](https://mdbootstrap.com/docs/standard/methods/smooth-scroll/): Smooth scroll for the latest Bootstrap 5. Slide to a section of a page with an animated scrolling effect. Trigger via data attribute or other options.
- [Sticky](https://mdbootstrap.com/docs/standard/methods/sticky/): Sticky method for the latest Bootstrap 5. Lock an element glued to the top or bottom of the viewport. You can also pin it to any other element.
- [Touch](https://mdbootstrap.com/docs/standard/methods/touch/): Touch for the latest Bootstrap 5. Custom events on touchscreen devices such as pinch, swipe, tap, press, pan and rotate.

## Design blocks
- [Admin](https://mdbootstrap.com/docs/standard/design-blocks/admin/): Responsive Admin blocks built with the latest Bootstrap 5 and stunning Material Design. Create your own Admin with various sections for the navigation, tables, charts and more.
- [Blog](https://mdbootstrap.com/docs/standard/design-blocks/blog/): Responsive Blog blocks built with the latest Bootstrap 5 and stunning Material Design. Create your own Blog with various sections for the article, homepage, and more.
- [eCommerce](https://mdbootstrap.com/docs/standard/design-blocks/ecommerce/): Responsive eCommerce design blocks & product grids built with Bootstrap 5. Built your own online store using ready-made sections such as lists, products, store home page, and many more.
- [Industries](https://mdbootstrap.com/docs/standard/design-blocks/industries/): Responsive Industries blocks built with the latest Bootstrap 5. Various examples for many industries such as Coworking, Software, Travel, and many more.
- [Landing page](https://mdbootstrap.com/docs/standard/design-blocks/landing-page/): Responsive Landing page blocks built with the latest Bootstrap 5. Plenty of design blocks examples such as Teams, services, projects, faq, and many more.
- [Portfolio](https://mdbootstrap.com/docs/standard/design-blocks/portfolio/): Responsive Portfolio blocks built with the latest Bootstrap 5. A large number of portfolio examples for various professions such as Architect, Model, and many others.

## Plugins
- [Calendar](https://mdbootstrap.com/docs/standard/plugins/calendar/): Responsive Calendar plugin built with the latest Bootstrap 5. Various customization options like default view, event formats, customizable captions, and much more.
- [Captcha](https://mdbootstrap.com/docs/standard/plugins/captcha/): Captcha plugin built with the latest Bootstrap 5.
- [Color picker](https://mdbootstrap.com/docs/standard/plugins/color-picker/): Responsive Color picker plugin built with the latest Bootstrap 5. Various examples are available, such as default values and swatches.
- [Cookies management](https://mdbootstrap.com/docs/standard/plugins/cookies-management/): Cookies management built with the latest Bootstrap 5. Options included: show modals only to new users, set a cookie, and much more.
- [Countdown](https://mdbootstrap.com/docs/standard/plugins/countdown/): Countdown plugin built with the Bootstrap 5. Examples of timers, counters, stopwatch, number counts, counter box & more.
- [Data parser](https://mdbootstrap.com/docs/standard/plugins/data-parser/): Data parser plugin built with the latest Bootstrap 5. CSV and JSON data display customization. Plenty of configurations such as vector maps, datatables, and many others.
- [Drag and drop](https://mdbootstrap.com/docs/standard/plugins/drag-and-drop/): Drag and Drop plugin built with Bootstrap 5. Draggable list, cards, tables, grid, buttons. Sort, copy, scroll, disable, delay, nested & other options. 
- [Dummy](https://mdbootstrap.com/docs/standard/plugins/dummy/): Responsive Dummy plugin built with the latest Bootstrap 5. Plenty of implementation examples such as images, lists, tables, and much more.
- [eCommerce gallery](https://mdbootstrap.com/docs/standard/plugins/ecommerce-gallery/): Responsive eCommerce gallery built with the latest Bootstrap 5. Customize with zoom effect, carousels, different positions, and much more.
- [File upload](https://mdbootstrap.com/docs/standard/plugins/file-upload/): File upload plugin built with the latest Bootstrap 5. Many customization options like custom height, max size, confirmation message, and much more.
- [Filters](https://mdbootstrap.com/docs/standard/plugins/filters/): Filters plugin built with the latest Bootstrap 5. Supports data array, checkboxes, customized sorting, and much more.
- [Input mask](https://mdbootstrap.com/docs/standard/plugins/input-mask/): Responsive Input Mask directive for the latest Bootstrap 5. Set a predefined format of forms. Phone number, special characters, clear incomplete & other examples.
- [Mention](https://mdbootstrap.com/docs/standard/plugins/mention/): Responsive Mention plugin built with the latest Bootstrap 5.  Mention is an autocomplete dropdown menu for your search inputs. It is useful for tagging users or topics.
- [Multi item carousel](https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/): Responsive Multi item carousel built with the latest Bootstrap 5. Many practical examples like lightbox integration, Vertical, autoplay, and many more.
- [Onboarding](https://mdbootstrap.com/docs/standard/plugins/onboarding/): Responsive Onboarding plugin built with the latest Bootstrap 5. It is is a guide plugin to show users how to use your website.
- [Organization chart](https://mdbootstrap.com/docs/standard/plugins/organization-chart/): Responsive family tree chart built with the latest Bootstrap 5. Organize data with a branching visualization. 
- [Parallax](https://mdbootstrap.com/docs/standard/plugins/parallax/): Responsive Parallax plugin built with the latest Bootstrap 5. Many customization examples of scrolling effect images animation like scroll delay, scroll direction.
- [Scroll status](https://mdbootstrap.com/docs/standard/plugins/scroll-status/): Scroll status for the latest Bootstrap 5. Creates a progress bar indicating page or component scroll level.
- [Storage management](https://mdbootstrap.com/docs/standard/plugins/storage-management/): Storage management in the latest Bootstrap 5. Manage data stored in the browser memory. Thanks to the component, you can add, delete, get data and check their end time.
- [Table editor](https://mdbootstrap.com/docs/standard/plugins/table-editor/): Responsive interactive built with the latest Bootstrap 5. Creates editable tables. Delete or edit rows directly or via modal editor.
- [Transfer](https://mdbootstrap.com/docs/standard/plugins/transfer/): Transfer plugin built with the latest Bootstrap 5. Transfer data between two columns. Supports disabled items, one way transfer, pagination, and more.
- [Tree view](https://mdbootstrap.com/docs/standard/plugins/tree-view/): Tree view plugin built with the latest Bootstrap 5. Plenty of customization examples such as accordion, selectable, expand, color, and many more.
- [TreeTable](https://mdbootstrap.com/docs/standard/plugins/treetable/): Responsive Treetable built with the latest Bootstrap 5. Examples with sortable, scrollable tables with buttons, checkboxes, panels and search.
- [Vector maps](https://mdbootstrap.com/docs/standard/plugins/vector-maps/): Responsive Vector maps plugin built with the latest Bootstrap 5. Customizable map display options such as , custom zoom, and many more.
- [WYSIWYG editor](https://mdbootstrap.com/docs/standard/plugins/wysiwyg-editor/): Responsive WYSIWYG editor built with the latest Bootstrap 5. Plenty of customization examples such as custom colors, translations, and many more.

## Templates
- [Admin dashboards](https://mdbootstrap.com/docs/standard/templates/admin-dashboard/): Built with the latest Bootstrap 5: SEO dashboard, eCommerce dashboard, Ads dashboard, Order dashboard, Traffic dashboard, Chat app & more
- [Blog](https://mdbootstrap.com/docs/standard/templates/blog/): Built with the latest Bootstrap 5: Magazine, Post, Tiles, Cards & more
- [eCommerce](https://mdbootstrap.com/docs/standard/templates/ecommerce/): Built with the latest Bootstrap 5: Home page, Product page, Checkout, Shopping cart, Shop, Whishlist & more
- [Landing pages](https://mdbootstrap.com/docs/standard/templates/landing-page/): Built with the latest Bootstrap 5: Bookstore, Volunteering, Psychologist, Animal Shelter, Painter, Florist & more
- [Portfolios](https://mdbootstrap.com/docs/standard/templates/portfolio/): Built with the latest Bootstrap 5: Agency, Minimalistic, Legal, Team, Architect, Culinary, Graphic designer & more

## Tools & Resources
- [Playground](https://mdbootstrap.com/snippets/): Best source of Bootstrap code examples, templates & plugins
- [Design generators](https://mdbootstrap.com/docs/standard/tools/): A collection of tools useful for web development and web design
- [Newsletter](https://mdbootstrap.com/newsletter/): Mailing List