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.

Example

Container

General Syntax

    <div class="container"></div>

Try It Now

Source Code

     
      <div class="container orange">
  <h3 class="center-align">Container</h3>
</div>

Try it yourself

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.

Example

Full Width Container

Source Code

     
      <div class="section">
	<p>Full Width Container With Top And Bottom Padding</p>
</div>

Try it yourself

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

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS