0

I installed bootstrap-material-design as instructed on the github website and everything said it was installed successfully:

enter image description here

I have inserted the recommended code into my application header:

  <!-- Material Design fonts -->
 <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
 <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

 <!-- Bootstrap -->
 <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

 <!-- Bootstrap Material Design -->
 <link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.css">
 <link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/ripples.min.css">

<!-- Material Design Scripts -->
<script src="bower_components/bootstrap-material-design/scripts/index.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/material.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/ripples.js"> </script>

and

<script type="text/javascript">
     $(document).ready(function() {
         $.material.init();
     });
 </script>

However, when I try a sample element (e.g. "jumbotron" or "well") it still appears the way normal bootstrap does, not the way your material design website says it should.

Any ideas on how to get it to appear? I didn't get any error message, so I don't really have anything to go on, and I don't want to manually download the files for fear of duplicates.

Liz
  • 1,369
  • 2
  • 26
  • 61
  • some links and screenshots of how you did it would be helpful to understand what went wrong in your case. – Vikram Tiwari May 29 '16 at 20:43
  • I used `bower install bootstrap-material-design` as instructed on the website and it said that the installation was successful. That's the issue. I didn't get any error messages, the functionality just isn't there. – Liz May 29 '16 at 20:47
  • @VikramTiwari, I added screenshots and code samples. Let me know if you can think of any other info that could be helpful. – Liz May 30 '16 at 03:59
  • Is the path correct? Isn't it supposed to be `bower_components/` unless you have a different bower config? – T J May 30 '16 at 08:57
  • I changed the paths (see the edited post) but it still doesn't appear. – Liz May 30 '16 at 14:29

2 Answers2

0

Apparently you do not have a reference to the correct JS files. Trying adding these to you code in the head section

<script src="scripts/index.js"> </script>
<script src="scripts/material.js"> </script>
<script src="scripts/ripples.js"> </script>
Mihir Kale
  • 1,028
  • 1
  • 12
  • 20
  • I added the recommended scripts (with the paths changed to reflect my project paths), but there was no change. – Liz May 30 '16 at 14:32
0

You seems to be missing references to jQuery and bootstrap's .js file. You should include both before material design script in that order.

T J
  • 42,762
  • 13
  • 83
  • 138