It is used to specify a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be fully responsive.
<body>
<div class="row red lighten-1">
<div class="center-align white-text">
<h4>www.freetimelearning.com</h4>
</div>
</div>
</body>The container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The container class is set to ~70% of the window width. We use the container to contain our body content.
<body>
<div class="container red lighten-1">
<div class="center-align white-text">
<h4>www.freetimelearning.com</h4>
</div>
</div>
</body>| 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 |
It is used to specify a column with sub-classes.
Our standard grid has 12 columns. We only defined the size for small screens using "col s12". This is fine if we want a fixed layout since the rules propagate upwards. By just saying s12, we are essentially saying "col s12 m12 l12".
<div class="row">
<div class="col s1 red lighten-1">1</div>
<div class="col s1 red lighten-1">2</div>
<div class="col s1 red lighten-1">3</div>
<div class="col s1 red lighten-1">4</div>
<div class="col s1 red lighten-1">5</div>
<div class="col s1 red lighten-1">6</div>
<div class="col s1 red lighten-1">7</div>
<div class="col s1 red lighten-1">8</div>
<div class="col s1 red lighten-1">9</div>
<div class="col s1 red lighten-1">10</div>
<div class="col s1 red lighten-1">11</div>
<div class="col s1 red lighten-1">12</div>
</div><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>To offset, simply add offset-m3 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by following example :
<div class="row center-align">
<div class="col s12 blue white-text"><p>s12</p></div>
</div>
<div class="row center-align">
<div class="col s6 m6 offset-s3 offset-m3 purple white-text"><p>( offset-s3 offset-m3 )</p></div>
</div>
<div class="row center-align">
<div class="col s6 m6 offset-s6 offset-m6 teal white-text"><p>( offset-s6 offset-m6 )</p></div>
</div>
<div class="row center-align">
<div class="col s6 m6 green white-text"><p>s6 m6</p></div>
</div>Simply add push-m2 or pull-m2 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to push or pull by following example :
<div class="row">
<div class="col s7 push-s5 lime accent-2">
<span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span>
</div>
<div class="col s5 pull-s7 amber darken-1">
<span class="flow-text">5-columns wide pulled to the left by 7-columns.</span>
</div>
</div>The section class is used for simple top and bottom padding. Just add the section class to your div's containing large blocks of content.
Dividers are 1 pixel lines that help break up your content. Just add the divider to a div in between your content.
<div class="container">
<div class="section">
<h5>Section 1</h5>
<p>Stuff</p>
</div>
<div class="divider"></div>
<div class="section">
<h5>Section 2</h5>
<p>Stuff</p>
</div>
<div class="divider"></div>
<div class="section">
<h5>Section 3</h5>
<p>Stuff</p>
</div>
</div>