MDB 5
Bootstrap 5 & Material Design 2.0 UI KIT
Trusted by 2 000 000+ developers & designers. Used by companies like
Tutorial for the latest Bootstrap v.5 Alpha. In this video we'll learn about the changes implemented into v.5.
>> Click here for a written tutorial
|
|
Start to Code |
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.
Carousel
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.
Footer
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.
MDB 5 Templates
All 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 |
Mgazine |
Checkout |
Blog |
Product |
Category |
Landing Page |
Admin |
Coming Soon |
Classic Jumbotron |
One Column |
Two Columns |
Three Columns |
Floating labels for Password inputs not triggering on auto-fill
When using the following input code, floating labels aren't triggering on auto-fill for the Password inputs (they're working fine for text inputs):
Screenshot:
Meteor package update
I'am using this project in my meteor project, and i found the version is still 0.3.0, which is too old, there is big difference between demo and my developed project. maybe you have forgotten updating it or something others. wish that, and i am willing to help : ) !
updated icon fonts
updating icon fonts w/ 24px baseline grid.
I still need to add the new CSS, however, I'm not exactly sure where this should go. It seems the only place we have the styles for the icon font are on the compiled CSS in the "dist" directory. However, I don't know if that's the best place for it since we have both SASS and LESS here.
new checkboxes
the specs for checkboxes was updated, this is a good CSS only implementation of them.
http://jsfiddle.net/cavico/a7u9jwhn/1/
we should update our implementation.
V4: promotion/release to master + v3 maintenance branch
We have been discussing a release of v4 because it seems very stable (even more so than the current master), yet the only concern being that we are on the tip of the BS4
master
.v3 has been stable but is not being actively developed. BS v3 has also switched to critical bug fixes only so we should be getting near BS4 stability.
The v4 build is setup to one-step publish, we just need to enable it. We are in a position to release v4 as frequently as necessary, which would allow users to pick their stable version (meaning that the latest version may not always be incrementally better). Nonetheless, users would have bower tags and npm versions to lock onto if necessary.
@FezVrasta and I are in favor of incremental publishing of v4 and promoting it to
master
.With that said, we really need some others to step up and pitch in to maintaining. @FezVrasta and I have other priorities right now and we will need additional maintainers to step up. I a have to move on to other projects. If you are interested in becoming a major contributor, please contact @FezVrasta.
Here is the proposed procedure:
v3-maintenance
- permanant maintenance branchTracking issues
Use this link to filter the issues and see only the ones related to our V4 implementation: https://github.com/FezVrasta/bootstrap-material-design/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20-label%3Av3%20
What I need from you:
checkbox issue with Angular 4
Test Case
I don't have Codepen URL as i am working on big project in angular and having issue related to checkbox in that
Summary
browser/OS : Chrome/Win 7
in my project i have added bootstrap-material-design.min.js and bootstrap-material-design.min.css. Also i have added below line in my app js: $('body').bootstrapMaterialDesign({ });
All checkboxes and radios are working fine on initial load. Because as it is angular 4 my project will load only once. But after that if i switch to another page and come down to same page again i don't see any checkboxes but can see radios and other controls.
Expected result
checkboxes should be there even after initial load as well.
Additional Information
Here is the code
and in the browser it looks like this
Please help.
V4: Uncaught ReferenceError
general issue => also occurs official website : http://rosskevin.github.io/bootstrap-material-design/examples/dashboard/
Test Case
http://codepen.io/rosskevin/pen/eJMMVB
Summary
Execution error :
More specifically (using bootstrap-material-design.iife.js in place of bootstrap-material-design.iife.min.js )
polyfill.js:1Uncaught ReferenceError: require is not defined e @ polyfill.js:1 (anonymous function) @ polyfill.js:1 createCommonjsModule @ bootstrap-material-design.iife.js:12 (anonymous function) @ bootstrap-material-design.iife.js:94 (anonymous function) @ bootstrapMaterialDesign.js:205
Expected result
Script is not working ...
Additional Information
This problem happens since today.
Your license uses the term "free software" incorrectly.
Then, later...
This is decidedly not free software, and I would ask that you kindly stop claiming that it is. The definition of free software by the Free Software Foundation explicitly grants users the freedom to distribute copies of the software, modified or not, without any further restrictions. Please do not dilute the meaning of the term "free software" any further by continuing to include this false statement in your license file.
Alternatively, you could remove the non-commercial clause, or even better, just use the GNU GPLv3 in its full form, instead of trying to imitate parts of it, which would better protect you (and everyone else) legally.
Thanks.
Improve material color and fonts
I was using your library to create a web. It main color is orange. I was looking at oranges at material design in google page and some colors convinced me. When i used it with the library i noticed that "Orange" color and "Amber" color uses a light font color (darkbg-text) and Google material oficial uses a dark font color (lightbg-text). It is a bit unreadable, I was thinking on a solution looking at current code. I dont know so much about less but i think that something like this could work:
In "_mixins.less":
In "_variables.less" where red, pink, purple... are:
and so on...
Then
.background-variations(@extra)
should be called on each element with a non transparent background.It will compile? should i add something else to get it working? should i finish the work and make a pull request?
Sorry if u cant understand something. I dont speak a very good english.
Thanks for reading!
Looking for a maintainer of the SASS version
Looks like @shockwork have not enough time to maintain the SASS files, if someone is willing to support me updating them to 0.2.0 please send a PR.
Thanks!
Sass compile error
During the gulp build, I encountered the following error message.
When I change the @import statement to the following it works fine.
XS sizing not functioning
For code like the following, the
xs
property doesn't function.<MDBCol xs="6" sm="4" lg="2" className="col-6 kanji-tile-col d-flex justify-content-center">
<MDBCard className="kanji-tile-card">
<MDBCardBody>
<MDBCardTitle className="kanji-character">{ props.character }</MDBCardTitle>
<MDBCardText className="kanji-voting">
<button className="upvote"><MDBIcon fas icon="angle-up" /></button>
<span className="vote-count">104</span>
<button className="downvote"><MDBIcon fas icon="angle-down" /></button>
</MDBCardText>
</MDBCardBody>
</MDBCard>
</MDBCol>
I can override it by adding stylings to other breakpoints and adding the
col-6
class, but thexs
functionality is not there.How to Remove Ripple effect from Buttons
Hello
I am using
MDB v6.0.1
. I want to remove ripple effect in entire application including buttons and Anchor tag. can you please help me.I am using
mdb.min.js
onlyThere is glitch when I click on the buttons. I have attached screen capture for that.
Better Material Tabs
Hello team, I use the framework since some years and I´m very happy with it. But the Tabs are not realy material conform. For this I created a npm mudule with real material tab design. It also stores the last selected tab.
Propably it can be usefullfull for the project. https://www.npmjs.com/package/h2-invent-material-tabs
Best regards
Position absolute causes bug when used on Sidenav
I made a container on my page (position relative) and placed a sidenav in it. The sidenav is positioned fixed by default (like an offcanvas), but there is a possibility to position the sidenav absolute by adding the 'position-absolute' class or by declaring 'data-mdb-position="absolute"'. Both ways are causing a bug though: I can click the toggle button to open the menu, but the toggle doesn't close it anymore. Also my close-button doesn't close the menu anymore.
<h3 id="inbox">Inbox</h3> <!-- inbox component --> <div class="container p-3 m-0 border border-dark" style="overflow-x:hidden; min-height:500px; height:auto;"> <div class="container border-bottom border-primary p-0 pb-1 m-0 mb-3"> <button type="button" class="btn btn-primary btn-floating shadow-0 d-inline" data-mdb-toggle="sidenav" data-mdb-target="#sidenav-inbox-filter" aria-controls="#sidenav-inbox-filter" aria-haspopup="true" aria-expanded="false"> <i class="fa-light fa-bars-sort"></i> </button> <h2 class="m-0 ms-3 fw-bold d-inline">Inbox</h2> </div> <div class="position-relative"> <nav id="sidenav-inbox-filter" class="sidenav h-auto shadow-0" data-mdb-close-on-esc="false" data-mdb-hidden="true" data-mdb-position="fixed" data-mdb-mode="side" data-mdb-content="#inboxContent" data-mdb-focus-trap="false"> <ul class="sidenav-menu"> <!-- Tasks --> <li class="sidenav-item border rounded mb-1"> <a class="sidenav-link"> <i class="fa-light fa-list-check fa-fw me-3"></i><span class="fw-bold">Tasks</span> </a> <ul class="sidenav-collapse show"> <hr class="dropdown-divider m-0" /> <li class="sidenav-item p-2"> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefaultB" id="flexRadioDefaultB1" checked /> <label class="form-check-label" for="flexRadioDefaultB1">My tasks</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefaultB" id="flexRadioDefaultB2" /> <label class="form-check-label" for="flexRadioDefaultB2">Work stock</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefaultB" id="flexRadioDefaultB3" /> <label class="form-check-label" for="flexRadioDefaultB3">All open tasks</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefaultB" id="flexRadioDefaultB4" /> <label class="form-check-label" for="flexRadioDefaultB4">Completed tasks</label> </div> </li> </ul> </li> </ul> </nav> <div id="inboxContent" class=" table-responsive my-3"> <table class="table table-striped table-hover table-slectable border"> <thead class="table-primary"> <tr> <th class="th-sm"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </th> <th class="th-sm">Name</th> <th class="th-sm">Position</th> <th class="th-sm">Office</th> <th class="th-sm">Age</th> <th class="th-sm">Start date</th> <th class="th-sm">Salary</th> <th class="th-sm">Options</th> </tr> </thead> <tbody> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Tiger Nixon</td> <td>System Architect </td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> <td class="position-relative"> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> <td> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> <td> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> <td> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> <td> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> </tbody> </table> </div> </div> </div>
Border colors doesn't work properly
Issue
When adding
border-warning
(or any other color) border of card doesn't have set color. (dark version)Photo
Code to reproduce