Important! A new UI Kit version for the latest Bootstrap 5 is available. Access the latest version via the link below

  • By MDBootstrap
  • Last update: Dec 24, 2022
  • Comments: 4

Material Design for Bootstrap

Material Design for Bootstrap is the best way to use Material Design guidelines by Google in your Bootstrap 4 based application. Since this is a fully customizable version of Bootstrap, just include Material Design for Bootstrap CSS instead of Bootstrap CSS, and include the JavaScript at the end of your document (just before the </body> tag), and everything will be converted to Material Design.

Documentation

Support

The things to do are a lot and the time is little, if you are a passionate developer with experience with Bootstrap and Material Design for Bootstrap and you have some spare time, please consider becoming a contributor of this project!
If you are interested contact @FezVrasta or just adopt one of our issues.

If you like this project you may support it by donating, starring this repository or reporting issues.
All issues filed should be reduced to a CodePen test case where possible.

Contributing

Development

If you want to get involved, please do so by submitting pull requests.
Before undertaking any major PR effort, please check the existing issues.
If there isn't one, please file a new issue so we can discuss and assign the work so effort is not duplicated.
Thank you!

Standard guidelines

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the Code Guide, maintained by Mark Otto, one of Bootstrap's founders.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at https://editorconfig.org.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, this project is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to those rules whenever possible.

See the Releases section of our GitHub project for changelogs of each release version.

License

MIT License

Github

https://github.com/mdbootstrap/bootstrap-material-design

Comments(4)

  • 1

    No Tags for this Project Breaks NPM and Bower builds

    Whatever was done 4 days ago deleted the tags that was being used by NPM and bower projects. Our project was dependent on version 0.5.10 and now we get the following error

    [INFO] bower bootstrap-material-design#^0.5.10 cached https://github.com/mdbootstrap/bootstrap-material-design.git#0.5.10 [INFO] bower bootstrap-material-design#^0.5.10 validate 0.5.10 against https://github.com/mdbootstrap/bootstrap-material-design.git#^0.5.10 [INFO] bower bootstrap-material-design#^0.5.10 ENORESTARGET No tag found that was able to satisfy ^0.5.10 [INFO] [INFO] Additional error details: [INFO] No versions found in https://github.com/mdbootstrap/bootstrap-material-design.git

  • 2

    .checkbox-on doesn't work in Safari 14

    Test Case

    https://codepen.io/FezVrasta/pen/JyVWMo?cf_chl_captcha_tk=f15e18beebedcdb1f32c83896155cbbb06c74dfc-1612904015-0-Abu4xlnDgO0C95-OAZh6NFL7tD6V7HNzH50HCUQ_cO-a0KS91_ApG1h5XmKOMWIatiy3UNJhUXzceJNa33Xz9P8PvXuZvo_Yt15o1C2I6srixnvlfaQRUiQLVUCHn9TVgFRaMVACBIKRXuwxFVNnzgR7mk7G6lyshE6BHgcBsxwNhpaoncZnzjHQbuf8CvkoAuH86O02j24kKEuSnuwKtmPRc-U8eK_N-gVr8DH9mdeQZvGhukzsacUAs2bPLvmw2MqkHKmfIts0j8OP1kXdq3LT-v41wYka53HybveajlvzT7D_lsKsRbfs4V56QJT4b-2TldDSTYN3ppob49CIFjnFDnIv1pTLu9bsENJfrA9oyZn4JmQ0CFTXdox4iLDA80suNgdCLbkFRFClNxFl1Uwi7pHS0fUJLNbElEl32SG-w5uJJETMj45anI6yur74waYjEBCwycY-y6f5FCU2Va4yGBwz8y4pKozJ5QxukTr3C7t2ibnLH3g0wuKDMD7jWiTC4QSbx__pwwtwQtad-vecOiHv3T4FNQr8KTkkY6l65pO8I1EksN5uh3_Cw2h-IE_ycdaSQxKh2DqgTzlbWvy84lpHb7UeNKHKVIJTpu-v

    <div class="checkbox">
  <label>
    <input type="checkbox" class="arg" checked="checked" value="Example"><span class="checkbox-decorator"><span class="check"></span>
      <div class="ripple-container"></div>
    </span> Example
  </label>
</div>

    Summary

    On Safari 14.0.3/macOS 11.2 using Bootstrap material 4.1.3, the checkbox briefly flashes during animation and then disappears. Visually it is not able to be seen as checked or not.

    On Chrome 88 on macOS 11.2 the checkbox is shown correctly.

    Expected result

    Checkbox should be seen

    Additional Information

    Originally discovered in https://github.com/gchq/CyberChef/issues/1172 and now reported here with bootstrap material design 4.1.3.

    image
  • 3

    Option to ignore HTML by framework

    Test Case

    https://codepen.io/ybelenko/pen/VwKgwPw

    Summary

    I try to apply framework to specific part of the application. However it adds classes to all entities within page body.

    $('.use-bmd').bootstrapMaterialDesign({});

    <!-- apply bootstrap material design to next div -->
<div class="container use-bmd">

  <h3>Floating label <i class="material-icons">face</i></h3>
  <div class="form-group bmd-form-group">
    <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="bmd-help">We'll never share your email with anyone else.</span>
  </div>
 
</div>
<!-- keep next div not modified -->
<div class="container keep-vanilla">

  <h3>Bootstrap vanilla</h3>
  <div class="form-group bmd-form-group">
    <label for="exampleInputEmail1" class="bmd-label-static">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="form-text">We'll never share your email with anyone else.</span>
  </div>
 
</div>

    Expected result

    I would expect HTML inside .keep-vanilla untouched

    <!-- apply bootstrap material design to next div -->
<div class="container use-bmd">

  <h3>Floating label <i class="material-icons">face</i></h3>
  <div class="form-group bmd-form-group">
    <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="bmd-help">We'll never share your email with anyone else.</span>
  </div>
 
</div>
<!-- keep next div not modified -->
<div class="container keep-vanilla">

  <h3>Bootstrap vanilla</h3>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="form-text">We'll never share your email with anyone else.</span>
  </div>
 
</div>

    Additional Information

    It would also be great to have some ignore classes or data attributes. Like:

    <!-- please don't add bmd-form-group and everything to next div -->
<div class="bmd-ignore" data-bmd-ignore>
    ...
</div>
  • 4

    Update cdnjs version

    Hello,

    Can you please configure uploads to cdnjs. The package is on the CDN (https://cdnjs.com/libraries/bootstrap-material-design) but the current upload is stale, at v4.0.2.

    It seems the repo changed?, The configuration might need to be updated: https://github.com/cdnjs/packages/blob/master/packages/b/bootstrap-material-design.json .

    Thanks.

Popular Tag

Related