Material Design UI Component Library Based On Bootstrap 5/4
File Size: | 1.87 MB |
---|---|
Views Total: | 1025 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Material Style is a responsive, beautifully crafted, Material Design styled UI component library built using jQuery library, Bootstrap 4/5 framework, and Material Icons.
Components Included:
- Accordion
- Alerts
- Badges
- Breakcrumb
- Buttons
- Cards
- Carousel
- Close button
- Collapse
- Drawer
- Dropdowns
- Floating Action Button
- Form Fields
- Lists
- Modal
- Navbar
- Pagination
- Placeholders
- Popovers
- Progress Bars
- Scrollspy
- Snackbars
- Spinners
- Tables
- Tabs
- Text Field
- Toasts
- Tooltips
How to use it:
1. Install the package with NPM.
# NPM $ npm i @materialstyle/materialstyle --save
2. Import the Material Style into your project.
import '@materialstyle/materialstyle'; // or import '@materialstyle/materialstyle/js/dist/util'; import '@materialstyle/materialstyle/js/dist/alert'; @import '@materialstyle/materialstyle/dist/css/materialstyle.min.css';
3. Or load the necessary JavaScript and CSS files into the document. Here is a starter template shows how to create a basic Material Style page.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Material Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <!-- Material Style CSS --> <link rel="stylesheet" href="./dist/css/materialstyle.min.css"> <title>Material Style</title> </head> <body> <!-- Navbar --> <nav class="navbar navbar-expand-sm bg-blue navbar-dark fixed-top auto-hide"> <a class="navbar-brand" href="javascript:"> Brand </a> </nav> <!-- Root --> <section class="m-root"> <!-- Container --> <div class="m-container"> YOUR CONTENT </div> </section> <!-- Footer --> <footer class="bg-dark text-white"> Footer </footer> <!-- jQuery --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- Popper JS --> <script src="/path/to/cdn/popper.min.js"></script> <!-- Material Style JS --> <script src="./dist/js/materialstyle.min.js"></script> </body> </html>
More Previews:
Changelog:
2022-11-26
- Updated for Bootstrap v5.2.3
2022-09-09
- v3.0.0 stable
2022-09-07
- Updated Bootstrap 5 version
2022-07-25
- Added Bootstrap 5 version
This awesome jQuery plugin is developed by materialstyle. For more Advanced Usages, please check the demo page or visit the official website.