mdb-ui-kit README

The project's README from github.com/mdbootstrap/mdb-ui-kit. As one markdown file: README.md.

Bootstrap 5 UI KIT - 700+ components, plain JavaScript, MIT license, simple installation.

MDB is a collection of free for personal & commercial use Bootstrap templates, themes, design tools & resources.


Get started

>> Get Started in 1 minute

Simple installation via .zip, npm or cdnjs.

>> Install with Webpack

This option is useful for experienced developers it enables bundling, unit testing code formatting, linting, saas support & more.

>> Install with MDBGO

Free Hosting, WordPress support, custom domains, SSL support, free database, frontend & backend templates, webpack starter included, git repostiory, FTP & jenkins support.

>> Install with MDBGO + e-commerce shop integration

One click setup! MDB GO allows you to create a WordPress page with a single click. Regardless whether you want to create a Travel Blog or an e-commerce shop to sell your product you can easily do that. You can even combine both into single page.

About Material Design for Bootstrap 5 & Vanilla JavaScript

Created by Downloads License MDBootstrap tutorial

Trusted by 3 000 000+ developers & designers. Used by companies & institutions like

  • 700+ UI components
  • Free templates
  • Super simple, 1 minute installation
  • Detailed docs & practical examples
  • Lots of tutorials
  • Plain JavaScript (but works also with jQuery)
  • Huge and active community
  • MIT license - free for personal & commercial use

Bootstrap 5 tutorial

>> Learn more about Bootstrap 5

>> Bootstrap 5 Tutorial

>> Subscribe to our YouTube channel with dozens of Bootstrap tutorials

Start learning from Basics

Learn Bootstrap 5 | Crash Course for Beginners in 1.5H


Demo

Simplicity and ease of use are key features of MDB 5 UI Kit. You need only one minute to install and run it.

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Buttons

Use MDB custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Spinners

Indicate the loading state of a component or page with MDB spinners, built entirely with HTML, CSS, and no JavaScript.

Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Validation

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.

Modal

Use MDB modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Hover

MDB hover effect appears when the user positions the computer cursor over an element without activating it. Hover effects make a website more interactive.

Tabs

Tabs are quasi-navigation components which can highly improve website clarity and increase user experience.

Notes

Notes are small components very helpful in inserting an additional piece of information.

ScrollSpy

Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

Also check out our standalone project Perfect Scrollbar which is included in MDB.


Free Bootstrap 5 templates

All of the templates were created with MDB 5 UI KIT (Material Design for Bootstrap 5).

MDB is a free (MIT license) library, that provides extra features and significantly extends Bootstrap's capabilities.

Ecommerce

Carousel Full Cover

Image Full Cover

Portfolio

Post

Pricing

Video Full Cover

Carousel Half Cover

Video Half Cover

Login

Magazine

Checkout

Blog

Product

Category

Landing Page

Admin

Coming Soon

Classic Jumbotron

One Column

Two Columns

Three Columns


Extended documentation

mdb-ui-kit (mdbootstrap/mdb-ui-kit)

Searching Database…

Что это?MDB UI Kit — это библиотека компонентов для Bootstrap 5 в стиле Material Design: более 700 UI-компонентов — кнопки, карточки, модальные окна, формы, вкладки, карусели — написанных на чистом JavaScript для создания фронтендов сайтов.
Это библиотека, с которой я буду делать сайты, или набор готовых шаблонов?Библиотека для создания сайтов: она расширяет возможности Bootstrap 5 дополнительными компонентами и оформлением в стиле Material Design. Готовые шаблоны — это отдельные бесплатные загрузки, сделанные с помощью этого кита.
Как подключить его к проекту?Установите через .zip, npm или cdnjs — в README утверждается, что через минуту вы уже всё запустили. Опытные разработчики могут пойти путём Webpack — с бандлингом, юнит-тестами, линтингом и поддержкой Sass.
Нужен ли jQuery, чтобы компоненты работали?Нет — компоненты написаны на чистом JavaScript, и jQuery не требуется; он нужен только если ваш проект его уже использует.
Нужен ли бэкенд или запущенный где-то Node.js?Нет — это чисто фронтендовый кит: HTML, CSS и JavaScript, которые работают в браузере посетителя; можно подключать прямо с CDN или из .zip без этапа сборки.
Могу ли я использовать его в коммерческих проектах?Да — лицензия MIT, бесплатен как для личного, так и для коммерческого использования.
Какие компоненты входят в комплект?Карусели, кнопки, спиннеры, карточки, формы с HTML5-валидацией, модальные окна, эффекты при наведении, вкладки, заметки и scrollspy — среди более чем 700 элементов, которые идут в ките.
Есть ли готовые дизайны страниц, с которых можно начать?Да — бесплатные шаблоны Bootstrap 5, собранные с этим китом: интернет-магазин, блог, журнал, оформление заказа, вход, цены, портфолио, лендинг и админ-панель.
Что такое MDB GO, который упоминается в документации по установке?Хостинг-платформа команды: бесплатный хостинг с SSL и кастомными доменами, поддержка WordPress, бесплатная база данных, деплой через git и FTP, а также создание сайтов на WordPress или интернет-магазинов в один клик.
Почему он называется Material Design, если это Bootstrap?Потому что он объединяет и то и другое: вы сохраняете рабочий процесс и структуру компонентов Bootstrap 5, но всё переоформлено в эстетике Material Design.
Size
49.6 MB
Stars
24.2K
Age
12y
Commits · 90 Days