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.
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.
<div class="container orange"> <h3 class="center-align">Container</h3> </div>
Source Code : Output
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
Full Width Container
<div class="section"> <p>Full Width Container With Top And Bottom Padding</p> </div>
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.