Bootstrap Material Design

Framework 1 :

Framework 2 :

+ Js file(s) :	//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js //cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js //cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.min.js

+ Css file(s) :	//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css //rawgit.com/angular/bower-material/master/angular-material.css //cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css //cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.css
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="ce44" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

&lt;div class="navbar navbar-warning"&gt;
  &lt;div class="navbar-header"&gt;
    &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-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;Brand&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="navbar-collapse collapse navbar-inverse-collapse"&gt;
    &lt;ul class="nav navbar-nav"&gt;
      &lt;li class="active"&gt;&lt;a href="javascript:void(0)"&gt;Active&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;
        &lt;a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &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;Action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li class="dropdown-header"&gt;Dropdown header&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:void(0)"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;form class="navbar-form navbar-left"&gt;
      &lt;input class="form-control col-lg-8" placeholder="Search" type="text"&gt;
    &lt;/form&gt;
    &lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;
        &lt;a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &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;Action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
  &lt;div class="sample1"&gt;
  &lt;div class="checkbox"&gt;
    &lt;label&gt;
      &lt;input checked="" type="checkbox"&gt; Auto-updates
    &lt;/label&gt;
  &lt;/div&gt;
&lt;/div&gt;
    
&lt;button class="btn btn-warning btn-raised"&gt;Done&lt;/button&gt;

CSS

Javascript

Bootstrap Material Design

Link :

Fork button :

Embed preview :