Materialize Container & Fluid Containers

Materialize container takes 70% of the available browser viewport width and it is mainly used to center the content. Keep in mind that it is not a mandatory part of the Materialize grid system, but it makes easy to center the web page content horizontally.

Example

Container

How To Create Materialize CSS Container

To create a container in Materialize CSS, simply add .container class to the <div> element base class.

General Syntax

      <div class="container">  </div>
    
Try it now

Source Code

          <div class="container" style="background: yellow;">
   <p class="center-align">materialize CSS Container</p>
</div>
        
Try it now

The materialized CSS container centers itself with respect to available breakpoints and also creates horizontal padding on both sides of the container.

Materialize Container Fluid / Full Width Container

Materialize full-width container that takes 100% of the available width of the screen, or viewport width. To create, use a block-level element such as <div>. There is no need to assign any extra class to the block-level element for 100% width. By default, it covers 100% of the screen.

Example

Fluid Container

Source Code

          <div style="background: yellow;">
   <p class="center-align">Materialize CSS Full Width Container</p>
</div>
        
Try it now

Conclusion

The Materialize container takes up 70% of the available screen width at each breakpoint. To create container, use the .container class. However, you can also create a full-width container by using a block-level element, such as <div>. The size of the full-width container will decrease proportionally as the browser width is resized.

Web Tutorials

Materialize Container
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4