Materialize CSS Container
Materialize CSS container takes 70% of the available browser viewport width and it is mainly used to center the content. It is not strictly part of the grid system but plays an important role to center the web content easily.
Basic Step To Create Container
To create a Materialize container, add container class to the <div> element. It has empty space on the left and right sides of the container and contains 10px padding inside the container.
Container
General Syntax
<div class="container"></div>
Source Code
<div class="container orange">
<h3 class="center-align">Container</h3>
</div>
Source Code : Output
Container
Materialize Container Fluid / Full Width Container
Materialize CSS full-width container takes 100% of the available browser width. Use HTML block element i.e. <div> to create full-width container fluid.
If you want to top and bottom padding inside the full-width container then assign an additional .section class to the <div> element.
Full Width Container
Source Code
<div class="section">
<p>Full Width Container With Top And Bottom Padding</p>
</div>
Conclusion
There are two types of Materialize CSS containers: fixed-width containers and full-width containers. A fixed-width container takes only 70% of the available width, while a full-width container takes 100% of the width of the device. Containers are used to center web content easily.
Web Tutorials
