new, badge classes to the badge to give it the background.<div class="container">
<ul class="pagination">
<li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
<li class="active"><a href="#!">1</a></li>
<li class="waves-effect"><a href="#!">2</a></li>
<li class="waves-effect"><a href="#!">3</a></li>
<li class="waves-effect"><a href="#!">4</a></li>
<li class="waves-effect"><a href="#!">5</a></li>
<li class="waves-effect"><a href="#!">6</a></li>
<li class="waves-effect"><a href="#!">7</a></li>
<li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
</ul>
</div>​<div class="chip">
<img src="https://www.freetimelearning.com/images/free-time-learn-icon.png" alt="Contact Person">
F T L
</div><div class="chip red white-text">
Material Design
<i class="close material-icons">close</i>
</div>preloader-wrapper div. The default size is medium, but you can add the classes big or small to adjust the size accordingly. You can add the classes spinner-red-only, spinner-blue-only, spinner-yellow-only and spinner-green-only.<div class="row">
<div class="container">
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>​| Mobile Devices <= 600px |
Tablet Devices > 600px |
Desktop Devices > 992px |
Large Desktop Devices > 1200px |
|
| Class Prefix | .s | .m | .l | .xl |
| Container Width | 90% | 85% | 70% | 70% |
| Number of Columns | 12 | 12 | 12 | 12 |
<div class="row center-align">
<div class="col s12 blue"><p>s12</p></div>
</div>
<div class="row center-align">
<div class="col s12 m4 l2 purple"><p>s12 m4</p></div>
<div class="col s12 m4 l8 red lighten-1"><p>s12 m4</p></div>
<div class="col s12 m4 l2 purple"><p>s12 m4</p></div>
</div>
<div class="row center-align">
<div class="col s12 m6 l3 blue"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3 amber"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3 blue"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3 yellow accent-4"><p>s12 m6 l3</p></div>
</div>responsive-img to your image tag.class="circle" this class image will be displayed in circular.video-container this class.responsive-video to the video tag.pulse class to your button. <div class="row">
<div class="col s6 m3 m20_0">
<a class="btn btn-floating btn-large pulse"><i class="material-icons">menu</i></a>
</div>
</div>z-depth. These shadows make texts and images more appealing.z-depth-0, z-depth-1, z-depth-2, z-depth-3, z-depth-4 and z-depth-5 to an HTML tag. Finally z-depth-0 can be used to remove shadows from elements that have z-depths by default.<div class="row">
<div class="col s6 m4 l2">
<div class="amber box-demo z-depth-3">
<p>z-depth-3</p>
</div>
</div>
</div><ul class="collection">
<li class="collection-item">HTML5</li>
<li class="collection-item">CSS3</li>
<li class="collection-item">Material Design</li>
<li class="collection-item">Bootstrap 4</li>
</ul>​<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled value="I am not editable" id="disabled" type="text" class="validate">
<label for="disabled">Disabled</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="col s12">
This is an inline input field:
<div class="input-field inline">
<input id="email" type="email" class="validate">
<label for="email" data-error="wrong" data-success="right">Email</label>
</div>
</div>
</div>
</form>​$(document).ready(function(){
$('.collapsible').collapsible();
});<div class="container">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">code</i>HTML5</div>
<div class="collapsible-body"><span>HTML5 (No space between "HTML" and "5")is a markup language.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">edit</i>CSS3</div>
<div class="collapsible-body"><span>The first working draft of CSS3 came in 19-01-2001. </span></div>
</li>
</ul>
</div><!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal_box">Basic Modal</a>
<!-- Modal Structure -->
<div id="modal_box" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the...</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-red btn">Agree</a>
</div>
</div><div class="parallax-container">
<div class="parallax">
<img src="../images/parallax_img.jpg" class="responsive-img" alt="Parallax">
</div>
</div>$(document).ready(function(){
$('.parallax').parallax();
});$('.pushpin-demo-nav').each(function() {
var $this = $(this);
var $target = $('#' + $(this).attr('data-target'));
$this.pushpin({
top: $target.offset().top,
bottom: $target.offset().top + $target.outerHeight() - $this.height()
});
});
// Only necessary for window height sized blocks.
html, body, .block {
height: 100%;
}$(document).ready(function(){
$('.target').pushpin({
top: 0,
bottom: 1000,
offset: 0
});
});waves-effect on to the buttons. If you want the waves effect to be white instead, add both waves-effect waves-light as classes.<div class="row">
<tr>
<td>waves-light</td>
<td class="center-align">
<a class="waves-effect blue waves-light btn" href="#!">Click Here !</a>
</td>
</tr>
</div>​