Search code examples
ruby-on-railstwitter-bootstrapbootstrap-material-design

Bootstrap-material-design: Install successful, but didn't work

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.

Solution

  • 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>