# 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
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