Ripple effect not working in bootstrap material design
<p>I am using Material Design for Bootstrap by fezvrasta.
I am able to have all color and other building blocks but ripple effect on buttons, textbox and others are not working.</p>

<p>In search bar, underline for ripple effect is there but I am not getting the same. Buttons or links do not have ripple effect.</p>

<pre class="lang-html prettyprint-override"><code>&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;title&gt;Materialize Demo&lt;/title&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
  &lt;link rel="stylesheet" href="css/bootstrap-material-design.css"&gt;
  &lt;link rel="stylesheet" href="css/ripples.css"&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;script type="text/javascript" src="js/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="js/material.js"&gt;&lt;/script&gt;
  &lt;script src="js/ripples.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;div class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="javascript:void(0)"&gt;Web Technology Classes&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse navbar-responsive-collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Learn
                &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Basics of Web&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Web Design Principles&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;HTML&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;CSS&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;JavaScript&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;XML&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;PHP&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;MySQL&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Practicals
                &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;HTML&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;CSS&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;JavaScript&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;XML&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;PHP&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;MySQL&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Q &amp; A
                &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Basics of Web&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Web Design Principles&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;HTML&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;CSS&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;JavaScript&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;XML&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;PHP&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;MySQL&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;form class="navbar-form navbar-right"&gt;
          &lt;div class="form-group"&gt;
            &lt;input type="text" class="form-control col-md-8" placeholder="Search"&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="container"&gt;
    &lt;div class="well"&gt;
      Google Adsense (Manual Responsive) 728x90 Leaderboard + 468x60 Small Leaderboard + 180x150 Small Rectangle
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="panel panel-primary panel-up"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;Basics of Web&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            Concept of WWW, Internet and WWW, HTTP Protocol : Request and Response, Web browser and Web servers, Features of Web 2.0
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="panel panel-primary panel-up"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;Web Design Principles&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            Concepts of effective web design, Web design issues including Browser, Bandwidth and Cache, Display resolution
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="panel panel-primary panel-up"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;Google Adsense&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            300x250 Adsense Content
            &lt;br/&gt;300x250 Adsense Content
            &lt;br/&gt;300x250 Adsense Content
            &lt;br/&gt;300x250 Adsense Content
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="panel panel-primary panel-up"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;HTML&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            Basics of HTML, formatting and fonts, commenting code, color, hyperlink, lists, tables, images, forms, XHTML, Meta tags, Character entities, frames
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="panel panel-primary panel-up"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;CSS&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            Need for CSS, introduction to CSS, basic syntax and structure, using CSS, background images, colors and properties, manipulating texts, using fonts, borders and boxes
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="panel panel-primary panel-up"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;Content.Ad&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            300x250 Advt. Content
            &lt;br/&gt;300x250 Advt. Content
            &lt;br/&gt;300x250 Advt. Content
            &lt;br/&gt;300x250 Advt. Content
            &lt;br/&gt;300x250 Advt. Content
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="panel panel-primary panel-up"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;JavaScript&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            Client side scripting with JavaScript, variables, functions, conditions, loops and repetition, Pop up boxes, Advance JavaScript: Javascript and objects, JavaScript own objects, the DOM
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="panel panel-primary panel-up"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;XML&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            Introduction to XML, uses of XML, simple XML, XML key components, DTD and Schemas, Using XML with application. Transforming XML using XSL and XSLT
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="panel panel-primary panel-up"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;Content.Ad&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            300x250 Advt. Content
            &lt;br/&gt;300x250 Advt. Content
            &lt;br/&gt;300x250 Advt. Content
            &lt;br/&gt;300x250 Advt. Content
            &lt;br/&gt;300x250 Advt. Content
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="panel panel-primary panel-up"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;PHP&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            Introduction and basic syntax of PHP, decision and looping with examples, PHP and HTML, Arrays, Functions, Browser control and detection, string, Form processing, Files
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="panel panel-primary panel-up"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;MySQL&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            Basic commands with PHP examples, Connection to server, creating database, selecting a database, listing database, listing table names, creating a table, inserting data
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="panel panel-primary panel-up"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;Content.Ad&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            300x250 Advt. Content
            &lt;br/&gt;300x250 Advt. Content
            &lt;br/&gt;300x250 Advt. Content
            &lt;br/&gt;300x250 Advt. Content
            &lt;br/&gt;300x250 Advt. Content
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="container"&gt;
    &lt;div class="well"&gt;
      Google Adsense (Manual Responsive) 728x90 Leaderboard + 468x60 Small Leaderboard + 180x150 Small Rectangle
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>Please refer this <a href="http://codepen.io/ashishrevar/pen/jqKWmZ" rel="nofollow">codepen</a>.</p>