Responsive Images

To make images resize responsively to page width, you can add the class responsive-img to your image tag. It will now have a max-width: 100% and height:auto.

style typography

Media can be styled in different ways using Materialize.

<a class="btn btn-floating pulse"><i class="material-icons">menu</i></a>
  <a class="btn btn-floating btn-large pulse"><i class="material-icons">cloud</i></a>
<a class="btn btn-floating btn-large cyan pulse"><i class="material-icons">edit</i></a>

Circular images

To make images appear circular, simply add class="circle" to them

This is a square image. Add the "circle" class to it to make it appear circular.

<div class="col s12 m8 offset-m2 l6 offset-l3">
<div class="card-panel grey lighten-5 z-depth-1">
<div class="row valign-wrapper">
  <div class="col s2">
    <img src="../../app-assets/images/avatar/avatar-7.png" alt="" class="circle responsive-img"> <!-- notice the "circle" class -->
  <div class="col s10">
    <span class="black-text">
      This is a square image. Add the "circle" class to it to make it appear circular.


We provide a container for Embedded Videos that resizes them responsively.

Responsive Embeds

To make your embeds responsive, merely wrap them with a containing div which has the class video-container

<div class="video-container">
<iframe width="853" height="480" src="//" allowfullscreen></iframe>

If your video does not have video controls, add the no-controls class to the video container.

Responsive Videos

To make your HTML5 Videos responsive just add the class responsive-video to the video tag.

  <video class="responsive-video" controls>
    <source src="movie.mp4" type="video/mp4">