Material Design for Bootstrap 4

  • By Daemon Internet Consultants
  • Last update: Jan 7, 2023
  • Comments: 16

Material

Backers on Open Collective Sponsors on Open Collective

Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4.

The basic idea behind this project is to combine the front-end technology of the popular Bootstrap framework with the visual language of Google Material Design.

A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. http://www.google.com/design/spec/material-design/introduction.html

Feel free to check out our documentation site or let us know what you think at the Daemon Labs forum.

The primary goal of this project is to give all Bootstrap components and elements a Google Material Design look, so it allows web developers to continue using the exact same Bootstrap HTML markup they are familiar with, but presents them a final outcome that is in line with the principles and specifics of Google Material Design.

A secondary goal of this project is to add support for some unique Google Material Design components such as floating buttons, pickers, and steppers, to name a few, which cannot be achieved by transforming existing Bootstrap components.

Because these components will require additional markup (some may require additional JavaScript), they will be documented separately in Material's documentation.

🙏

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Table of contents

Content

Within the download you will find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

daemonite-material/
├── css/
│   ├── material.css
│   ├── material.css.map
│   ├── material.min.css
│   └── material.min.css.map
└── js/
    ├── material.js
    ├── material.js.map
    ├── material.min.js
    └── material.min.js.map

We provide compiled CSS and JavaScript (material.*), as well as compiled and minified CSS and JavaScript (material.min.*). CSS and JavaScript source maps (material.*.map) are available for use with certain browsers' developer tools.

The Material source code download includes the precompiled CSS and JavaScript, along with documentation and source assets. More specifically, it includes the following and more:

daemonite-material/
├── assets/
│   ├── js/
│   └── scss/
├── css/
│   ├── material.css
│   ├── material.css.map
│   ├── material.min.css
│   └── material.min.css.map
├── docs/
│   └── 4.1/
└── js/
    ├── material.js
    ├── material.js.map
    ├── material.min.js
    └── material.min.js.map

Documentation

Material's documentation, included in this repo in the root directory, is built with Jekyll and publicly hosted on GitHub Pages at http://daemonite.github.io/material/. The docs may also be run locally.

Running documentation locally

  1. Run through the tooling setup to install Jekyll and other Ruby dependencies with bundle install.
  2. Run npm install to install Node.js dependencies.
  3. Run npm run dist and npm run docs to rebuild distributed CSS and JavaScript files, as well as docs assets.
  4. From the root /daemonite-material directory, run npm run docs-serve in the command line.
  5. Open http://localhost:9999/material in your browser, and voilà.

Quick start

Several quick start options are available:

  • Clone the repo: git clone https://github.com/Daemonite/material.git
  • Download the latest release
  • Install with bower: bower install daemonite-material
  • Install with npm: npm install daemonite-material

Github

https://github.com/Daemonite/material

Comments(16)

  • 1

    How to use CSS variables

    you wrote in the doc that css variables can be used change the colors. But in the compiled css under daemonite-material\css\ I cannot see any color attribute is using var(--abc). Can you elaborate how to use these css variables described in the doc.

    many thanks iocast

  • 2

    Comparison with alternative Material projects; eg. MaterializeCSS

    From the commit history, I see this library was started in Feb 2015. At that time, MaterializeCSS was already around, so there must've been good reasons to not contribute there instead, or fork that project.

    Would be nice to mention prior art in the README.

  • 3

    Bootstrap 4v2, pointer cursor and Paypal donation

    Hi guys,

    1. you are awesome, thank you for your work !!! I'd like to send you some money to get you a beer ! Do you have a Paypal account for donation ?

    2. Do you plan a build with bootstrap 4 beta 2 ?

    3. What do you think of using pointer: cursor on btn and checkbox elements ?

    4. What do you think of MDBootstrap z-index classes ? It's a cool feature.

    Thanks for all. Hope I'll have some time to bring you some work soon.

  • 4

    Floating label text field not rendered correctly when rendered with a value

    Hi,

    As described on http://daemonite.github.io/material/docs/4.1/material/text-fields/#floating-label-text-fields I can move a label above the text field.

    However, this doesn't seem to work when a prefilled input field is rendered. I know can work around this by adding the 'has-value' class to container tag, but I'm not sure if this is by design or a bug.

    So this doesn't move the label correctly when the input does not have the focus:

    <div class="form-group">
  <div class="floating-label">
    <label for="exampleFloatingLabel1">Floating label</label>
    <input aria-describedby="exampleFloatingLabel1Help" class="form-control" id="exampleFloatingLabel1" placeholder="Optional placeholder" type="text" value="My Value">
  </div>
</div>

    But this does:

    <div class="form-group">
  <div class="floating-label has-value">
    <label for="exampleFloatingLabel1">Floating label</label>
    <input aria-describedby="exampleFloatingLabel1Help" class="form-control" id="exampleFloatingLabel1" placeholder="Optional placeholder" type="text" value="My Value">
  </div>
</div>
  • 5

    Material Checkboxes & Radio Buttons don't work with Chrome for iOS

    Material Checkboxes & Radio Buttons don't work with Chrome for iOS, you can test on your demo http://daemonite.github.io/material/ui-form-adv.html

  • 6

    Carousel not auto sliding

    Upon grabbing the code example from https://daemonite.github.io/material/docs/4.0/components/carousel/ the auto sliding that was shown no longer shows up in my app. My code is below. Our framework is Angular/material-io.

    <div class="row">
  <div *ngIf="promoUrl !== null" id="carousel" class="carousel slide container" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img [src]="promoUrl" (error)="promoUrl = defaultPromo" [ngClass]="[isWeb || isIpad ? 'promoWeb' : '']" class="promo" alt="">
      </div>
      <div class="carousel-item" *ngFor="let promo of promos;">
        <img [src]="promo" (error)="onImgError($event)" [ngClass]="[isWeb || isIpad ? 'promoWeb' : '']" class="promo" alt="">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <div *ngIf="promoUrl === null" [ngClass]="[isWeb ? 'center' : '']" class="container">
    <img [src]="defaultPromo" class="promo" alt=""/>
  </div>
</div>
  • 7

    Angualr JS Support

    Would you be interested to create an angularized version of this template? There is already an angular version for the bootstrap.js https://angular-ui.github.io/bootstrap/

    There is an ongoing project for angular material design : https://github.com/angular/material However this is based on FlexBox instead of Bootstrap.

  • 8

    Missing icons

    Hi, beatiful work! It's a wonderful themplate! Just one thing that is not perfect, the icons doesn't appear...do you have any solution for that? thanks

  • 9

    djibe fork

    Hi @djibe

    Sorry I had to open ticket here. You don't have or maybe you have disabled issues on your fork.

    • What is the long-term plan for your forked project?
    • Are you going to merge it here after it's finished?
    • Do you plan to enable issues on your project page?

    Unfortunately creators of this fork as it currently stands seems to have abandon the project. So it's pretty unclear what the users are going to do next.

  • 10

    Modal is not a function

    When I am trying to open the modal with the following code, I get the error modal is not a function, I am sure I brought the library and I can trigger modal with a button .

    $("#testModeal").modal({ show: true });

  • 11

    Change color to tabs line

    Hello,

    I'm new in the bootstrap and I have and question to personalize this library.

    I'm using the Tabs component an now I want to change the color the line under the tab selected also I want to change the text color selected with the different to the color tab unselected

    This is my project screen Selection_040

    Selection_041 I want the color line yellow and I want when I will select the new tab the color text yellow.

    This is a question and not an issue, Exist a simple mode inside the library to resolve my problem?

  • 12

    Bump json5 from 2.1.1 to 2.2.3

    Bumps json5 from 2.1.1 to 2.2.3.

    Release notes

    Sourced from json5's releases.

    v2.2.3

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2

    • Fix: Bump minimist to v1.2.5. (#222)
    Changelog

    Sourced from json5's changelog.

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    • Fix: Bump minimist to v1.2.5. (#222)
    Commits
    • c3a7524 2.2.3
    • 94fd06d docs: update CHANGELOG for v2.2.3
    • 3b8cebf docs(security): use GitHub security advisories
    • f0fd9e1 docs: publish a security policy
    • 6a91a05 docs(template): bug -> bug report
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 13

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge`: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 14

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 15

    Changing the default color for controls

    Greetings, I tried to change the primary colour for the theme and i can see it on the generated css but all the controls, buttons, tabs, date picker, etc, still show as pink. Thanks, Huambo

  • 16

    Next/Previous buttons not working in web, angular 14.

    After updating our project to angular 14 and node 16.15.0, I've noticed that next/previous buttons for the carousel now force reload the page with the carousel variable name in the link (ex: http://localhost:4200/login#carouselExampleControls). Is there a fix or workaround for this?

Popular Tag

Related