{"id":13589940,"url":"https://github.com/mdbootstrap/material-design-for-bootstrap","last_synced_at":"2025-05-13T23:08:37.483Z","repository":{"id":40311185,"uuid":"63760777","full_name":"mdbootstrap/material-design-for-bootstrap","owner":"mdbootstrap","description":"Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.","archived":false,"fork":false,"pushed_at":"2023-02-01T14:01:33.000Z","size":11631,"stargazers_count":9315,"open_issues_count":27,"forks_count":1140,"subscribers_count":297,"default_branch":"master","last_synced_at":"2025-04-03T01:44:27.713Z","etag":null,"topics":["bootstrap","bootstrap-4","bootstrap4","css","design","framework","frontend","google-material","javascript","material","material-design","material-design-for-bootstrap","mdbootstrap","ui","ui-kit","uikit"],"latest_commit_sha":null,"homepage":"https://mdbootstrap.com/docs/standard/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdbootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"license","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-20T07:36:28.000Z","updated_at":"2025-04-02T20:12:16.000Z","dependencies_parsed_at":"2023-02-17T06:15:50.498Z","dependency_job_id":null,"html_url":"https://github.com/mdbootstrap/material-design-for-bootstrap","commit_stats":null,"previous_names":[],"tags_count":65,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fmaterial-design-for-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fmaterial-design-for-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fmaterial-design-for-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fmaterial-design-for-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/material-design-for-bootstrap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154073,"owners_count":21056536,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-4","bootstrap4","css","design","framework","frontend","google-material","javascript","material","material-design","material-design-for-bootstrap","mdbootstrap","ui","ui-kit","uikit"],"created_at":"2024-08-01T16:00:36.504Z","updated_at":"2025-04-10T03:38:49.107Z","avatar_url":"https://github.com/mdbootstrap.png","language":"JavaScript","readme":"Bootstrap 4 UI KIT - 700+ components, MIT license, simple installation.\n\nMDB is a collection of free Bootstrap templates, themes, design tools \u0026 resources.\n\n---\n\n#### This content is for the previous 4th version of Bootstrap\n\n#### Newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product\n\n### [\u003e\u003e Get 700+ material UI components, free hosting, super simple 1 minute installation \u0026 much more](https://mdbootstrap.com/docs/standard/)\n\n---\n\n# Get started\n\n### [\u003e\u003e Get Started in 1 minute](https://mdbootstrap.com/docs/b4/jquery/getting-started/installation/)\nSimple installation via .zip, npm or cdnjs.\n \n### [\u003e\u003e Install with MDBGO](https://mdbgo.com/) \n Free Hosting, WordPress support, custom domains, SSL support, free database, frontend \u0026 backend templates, webpack starter included, git repostiory, FTP \u0026 jenkins support.\n \n### [\u003e\u003e Install with MDBGO + e-commerce shop integration](https://mdbgo.com/wordpress-shop/)\nOne click setup! MDB GO allows you to create a WordPress page with a single click.\nRegardless 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.\n\n\n## About Material Design for Bootstrap 4\n\n\u003cp\u003eCreated by \u003ca href=\"https://mdbootstrap.com\"\u003e\u003cimg height=\"30\" src=\"https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png\"\u003e\u003c/a\u003e  \n\u003ca href=\"https://npmcharts.com/compare/mdbootstrap?minimal=true\"\u003e \u003cimg src=\"https://img.shields.io/npm/dm/mdbootstrap.svg?label=NPM%20Downloads\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/mdbootstrap/material-design-for-bootstrap/blob/master/License.pdf\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-green.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\u003ca href=\"https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+4+UI+KIT%20https://mdbootstrap.com/docs/b4/jquery/\u0026hashtags=javascript,code,webdesign,bootstrap\"\u003e\u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\u0026label=Let%20us%20know%20you%20were%20here%21\u0026\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.youtube.com/watch?v=c9B4TPnak1A\"\u003e\u003cimg alt=\"YouTube Video Views\" src=\"https://img.shields.io/youtube/views/c9B4TPnak1A?label=Bootstrap%205%20Tutorial%20Views\u0026style=social\"\u003e\u003c/a\u003e\u003c/p\u003e\n\nTrusted by \u003cb\u003e2 000 000+\u003c/b\u003e developers \u0026 designers. Used by companies \u0026 institutions like\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003cimg width=\"300\" src=\"https://mdbootstrap.com/img/logo/brands/nasa.png\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/nike.png\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/amazon.png\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/sony.png\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/samsung.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/airbus.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/yahoo.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/deloitte.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/ge.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/kpmg.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/unity.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/ikea.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/aegon.png\"\u003e\n    \u003c/tr\u003e\n   \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n          \u003ca href=\"https://mdbootstrap.com/docs/standard/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n          \t\t\u003cimg src=\"https://mdbcdn.b-cdn.net/img/Marketing/products/jquery/mdb-free.webp\"\u003e\n          \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cul\u003e\n        \u003cli\u003e\u003cb\u003e\u003ca href=\"https://mdbootstrap.com/docs/b4/jquery/\"\u003e500+ UI components\u003c/a\u003e\u003c/b\u003e\u003c/li\u003e          \n         \u003cli\u003eSuper simple, 1 minute installation\u003c/li\u003e\n         \u003cli\u003eDetailed docs \u0026 practical examples\u003c/li\u003e\n         \u003cli\u003eLots of tutorials\u003c/li\u003e\n         \u003cli\u003eHuge and active community\u003c/li\u003e\n         \u003cli\u003e\u003cb\u003eMIT license - free for personal \u0026 commercial use\u003c/b\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n   \u003c/tbody\u003e\n\u003c/table\u003e\n\n___\n\n# Bootstrap 5 tutorial\n\n**[\u003e\u003e Learn more about Bootstrap 5](https://mdbootstrap.com/docs/standard/bootstrap-5/)**\n\n**[\u003e\u003e Bootstrap 5 Tutorial](https://mdbootstrap.com/docs/standard/bootstrap-5-tutorial/)**\n\n**[\u003e\u003e Subscribe to our YouTube channel with dozens of Bootstrap tutorials](https://www.youtube.com/c/Mdbootstrap?sub_confirmation=1)**\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n         \u003ca href=\"https://mdbootstrap.com/docs/b4/jquery/getting-started/installation/\" alt=\"Bootstrap Tutorials\" rel=\"dofollow\"\u003e\n          \t\t\u003cimg src=\"https://mdbootstrap.com/wp-content/uploads/2020/12/learnmore-1.png\"\u003e\n          \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n          \u003ca href=\"https://mdbootstrap.com/docs/standard/bootstrap-5-tutorial/#section-beginner\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n          \t\t\u003cimg src=\"https://mdbootstrap.com/wp-content/uploads/2020/12/cover-bootstrap-5-1.png\"\u003e\n          \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n        \u003ctd align=\"center\"\u003e\n          \u003cp align=\"center\"\u003e\u003cb\u003eStart MDB jQuery learning from Basics\u003c/b\u003e\u003c/p\u003e\n          \u003ca href=\"https://mdbootstrap.com/docs/b4/jquery/getting-started/installation/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n          \t\t\u003cimg src=\"https://mdbootstrap.com/wp-content/uploads/2020/12/Screenshot_26.png\"\u003e\n          \u003c/a\u003e\n         \u003c/td\u003e\n        \u003ctd align=\"center\"\u003e\n          \u003cp align=\"center\"\u003e\u003cb\u003eLearn Bootstrap 5 | Crash Course for Beginners in 1.5H\u003c/b\u003e\u003c/p\u003e\n          \u003ca href=\"https://mdbootstrap.com/docs/standard/bootstrap-5-tutorial/#section-beginner\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n          \t\t\u003cimg src=\"https://mdbootstrap.com/wp-content/uploads/2020/12/Screenshot_26.png\"\u003e\n          \u003c/a\u003e\n         \u003c/td\u003e\n      \u003c/tr\u003e\n   \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n\n\n\n\n\n\n\n\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/getting-started/download/\"\u003e\n  \u003cimg src=\"https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png\"\u003e\n\u003c/a\u003e\n\n\n# Material Design for Bootstrap\n\n\u003ca href=\"https://npmcharts.com/compare/mdbootstrap?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/mdbootstrap.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-green.svg\" alt=\"License\"\u003e\u003c/a\u003e\t\n\u003ca href=\"https://cdnjs.com/libraries/mdbootstrap\"\u003e\u003cimg src=\"https://img.shields.io/cdnjs/v/mdbootstrap.svg\" alt=\"cdnjs\"\u003e\u003c/a\u003e\t\n\u003ca href=\"https://badge.fury.io/js/mdbootstrap\"\u003e\u003cimg src=\"https://badge.fury.io/js/mdbootstrap.svg\" alt=\"npm\"\u003e\u003c/a\u003e\t\n\u003ca href=\"https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+4+UI+KIT%20https://mdbootstrap.com/docs/jquery/\u0026hashtags=javascript,code,webdesign,bootstrap\"\u003e\u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\"\u003e\u003c/a\u003e\t\n\nThe most popular UI KIT for building responsive, mobile-first websites and apps - free for personal \u0026 commercial use. Available jQuery, Angular, React and Vue versions.\n\nTrusted by \u003cb\u003e2 000 000+\u003c/b\u003e developers \u0026 designers. Used by companies like\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/nike.png\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/amazon.png\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/sony.png\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/samsung.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/airbus.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/yahoo.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/deloitte.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/ge.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/kpmg.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/unity.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/ikea.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/aegon.png\"\u003e\n    \u003c/tr\u003e\n   \u003c/tbody\u003e\n\u003c/table\u003e\n\nOur impressive collection of beautiful, 500+ material UI elements, 600+ material icons, 77+ CSS animations, 9+ useful plugins, SASS files, templates, tutorials and many more allows you to develop any kind of project.\n\nWe're maintaining a [dedicated Support Forum](https://mdbootstrap.com/support/) for this purpose. This is also a go-to place for every suggestion, opinion, bug, and issue report if you'd like to receive help as soon as possible. Reports posted on Support Forum are **prior to GitHub issues**\n\n**Please read [contribution rules](https://github.com/mdbootstrap/bootstrap-material-design/blob/master/CONTRIBUTING.md) before starting your improvements in order to help us make the cooperation and reviewing experience as pleasant and effective as possible**\n\n# More Web Development Technologies\n\n| MDBootstrap Angular |⠀MDBootstrap React | MDBootstrap Vue⠀| MDBootstrap 5 |\n| --------------- | ------------------ | ------------- | ------------- |\n|  ­­ ­­­ ­­­ ­­­ ­­­ ­­­  [![MDB Angular](https://mdbootstrap.com/img/Marketing/general/logo/small/angular.png)](https://mdbootstrap.com/docs/angular/) | ­­ ­­­ ­­­­ ­­­ ­­­  [![MDB React](https://mdbootstrap.com/img/Marketing/general/logo/small/react.png)](https://mdbootstrap.com/docs/react/) |  ­­ ­ ­­­ ­­­ [![MDB Vue](https://mdbootstrap.com/img/Marketing/general/logo/small/vue.png)](https://mdbootstrap.com/docs/vue/) |  ­­ ­­­­  [![MDB 5](https://mdbootstrap.com/wp-content/uploads/2020/08/bootstrap5-logo.png)](https://mdbootstrap.com/docs/standard/) |\n\n# Quick Start Video\n\n \u003ca href=\"https://youtu.be/cXTThxoywNQ\"\u003e\u003cimg src=\"https://mdbootstrap.com/wp-content/uploads/2020/11/YouTubeGit-1.png\"\u003e\u003c/a\u003e\n\nAccording to your preference, you can follow a [video](https://youtu.be/cXTThxoywNQ) or [written version](https://mdbootstrap.com/education/bootstrap/quick-start/)\n\nAlso, you can install MDB Free using NPM [installation guide](https://mdbootstrap.com/docs/jquery/getting-started/installation-guide/)\n\n# MDB CLI - the fastest way to create and host MDB projects\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003ca href=\"https://mdbootstrap.com/cli/\"\u003e\n          \u003cimg\n            src=\"https://mdbootstrap.com/img/Marketing/products/cli/cli-free.jpg\"\n            \u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"left\" valign=\"top\"\u003e\n        \u003cb\u003eInitiate\u003c/b\u003e\n        \u003cbr /\u003e\n        With MDB CLI you can start a new project within seconds! Use \u003cb\u003e\u003ccode\u003emdb init\u003c/code\u003e\u003c/b\u003e command and start with a pre-set configuration!\n      \u003c/td\u003e\n      \u003ctd align=\"left\" valign=\"top\"\u003e\n        \u003cb\u003ePublish and host\u003c/b\u003e\n        \u003cbr /\u003e\n        Make your project visible with \u003cb\u003e\u003ccode\u003emdb publish\u003c/code\u003e\u003c/b\u003e, no need to store your code, simply get the link and share it with the world!\n      \u003c/td\u003e\n        \u003ctd align=\"center\"\u003e\n          \u003cb\u003e\u003ca href=\"https://mdbootstrap.com/cli/\"\u003eGet started\u003c/a\u003e \u003c/p\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n# Demo\n\n### Carousel\n\n\u003cp\u003eA slideshow component for cycling through elements—images or slides of text—like a carousel.\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/javascript/carousel/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-carousel.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n### Loader / Spinner\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/components/spinners/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-loader.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/components/spinners/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-color-spinners.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/components/spinners/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo4-multicolor.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/components/spinners/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo4-crazyloader.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n### Buttons\n\n\u003cp\u003eYou can use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more...\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/components/buttons/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo4-buttons.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/components/buttons/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo4-social-buttons.png\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n### Cards\n\n\u003cp\u003eBootstrap cards are components which display content built of different elements with characteristic shadows, depth and hover effects.\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/components/cards/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo4-cards-cascading.png\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/components/cards/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo4-fancy-cards.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/components/cards/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo4-cards-overlay.png\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n### Alerts \n\n\u003cp\u003eBootstrap alerts are feedback messages that are displayed after specific actions performed by the user. The length of the text is unlimited.\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/components/cards/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo4-alerts.png\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n### Hamburger Menu\n\n\u003cp\u003eBootstrap alerts are feedback messages that are displayed after specific actions performed by the user. The length of the text is unlimited.\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/navigation/hamburger-menu/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo4-hamburgermenu.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n### Footer\n\n\u003cp\u003eA footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/navigation/footer/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-footer.png\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/navigation/footer/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo4-footer-image.png\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/navigation/footer/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo4-footer-video.png\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n### Sidenav\n\n\u003cp\u003eBootstrap's sidenav is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/jquery/navigation/sidenav/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo4-sidenav.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003cp\u003eUse MDB modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/standard/components/modal/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-modal.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n# Supported browsers\n\nMDBootstrap supports the **latest, stable releases** of all major browsers and platforms.\n\nAlternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, MDBootstrap should (in most cases) display and function correctly in these browsers as well.\n\n### Mobile devices\n\nGenerally speaking, MDBootstrap supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not supported.\n\n|  | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome  | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox  |  [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari   | Android Browser \u0026 WebView  |                  [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003e Miscrosoft Edge                      |\n|:--------------------:|:---------------------------:|:----------------------------:|:----------------------------:|:----------------------------:|:-------------------------------------------------------------------------:|\n|⠀Android⠀|⠀Supported⠀|⠀Supported⠀|⠀N/A⠀| Android v5.0+ supported | Supported |\n|⠀iOS⠀|⠀Supported⠀|⠀Supported⠀|⠀Supported | N/A | Supported |\n|⠀Windows 10 Mobile⠀|⠀N/A⠀|⠀N/A⠀|⠀N/A⠀| N/A⠀| Supported |\n\n### Desktop browsers\n\nSimilarly, the latest versions of most desktop browsers are supported.\n\n|  | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome  |  [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox  | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003e Internet Explorer  |  [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"Internet Explorer / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003e Edge  | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eOpera                  |       [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari       |\n|:--------------------:|:-----------------------------:|:------------------------------:|:------------------------------:|:----------------------------:|:-------------------------------------------------------------------------:|:------------------------------:|\n| ⠀⠀⠀Mac⠀⠀| Supported | Supported | N/A | N/A |⠀Supported⠀|⠀Supported⠀⠀|\n|⠀⠀⠀Windows⠀  |Supported | Supported | N/A |⠀Supported⠀|⠀Supported⠀|⠀Not supported⠀|\n\n\n\n\n## Documentation\n\nYou can explore [huge, detailed documentation](https://mdbootstrap.com/) on our website. You can also use [sitemap](https://mdbootstrap.com/md-bootstrap-sitemap/) where each component is located\n\n## Education\n\nAdditional tutorials for those with insatiable appetite for knowledge made by us \u0026 our users can be found in our [education section](https://mdbootstrap.com/education/) \u0026 in [miscellaneous](https://mdbootstrap.com/articles/)\n\n## Useful resources\n\nHere you'll find more useful resources, like [Getting Started](https://mdbootstrap.com/docs/jquery/getting-started/download/), [Freebies](https://mdbootstrap.com/freebies/), [Premium Templates](https://mdbootstrap.com/templates/) \u0026 [snippet editor](https://mdbootstrap.com/snippets/)\n\n\n## Connect with us on\n\n[Twitter](https://twitter.com/MDBootstrap) | [Facebook](https://www.facebook.com/mdbootstrap) | [Pinterest](https://pl.pinterest.com/mdbootstrap) | [Dribbble](https://dribbble.com/mdbootstrap) | [LinkedIn](https://www.linkedin.com/company/material-design-for-bootstrap) | [YouTube](https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA)\n\n## You enjoy using MDB? Check the advantages of the PRO version\n\n[Material Design for Bootstrap PRO](https://mdbootstrap.com/products/jquery-ui-kit/)\n\n### Support MDB developers\n- Star our GitHub repo\n- Create pull requests, submit bugs, suggest new features or documentation updates\n- Follow us on [Twitter](https://twitter.com/mdbootstrap)\n- Like our page on [Facebook](https://www.facebook.com/mdbootstrap)\n\nA big ❤️ **thank you to all our users** ❤️ who are working with us to improve the software. We wouldn't be where we are without you. \n\n","funding_links":[],"categories":["JavaScript","9. 其他与展望","material-design","ui","bootstrap"],"sub_categories":["5. 参考材料"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Fmaterial-design-for-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Fmaterial-design-for-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Fmaterial-design-for-bootstrap/lists"}