Open In App

Materialize CSS Helpers

Improve
Improve
Like Article
Like
Save
Share
Report

There are several helpers in materialize CSS that are used for designing needs such as:

  • Alignment
  • Hiding/Showing content
  • Formatting

1. Alignment: Content can be aligned horizontally or vertically by using the following classes:

  • Vertical Align: It can be easily done by adding the class valign-wrapper to the container holding the items that you want to align.
    <div class="valign-wrapper">
      <h5>This is vertically aligned</h5>
    </div>
  • Horizontal Align: These classes are used for horizontally aligning the content: left-align, right-align, center-align.
     <div>
        <h5 class="left-align">This is left aligned</h5>
      </div>
      <div>
        <h5 class="right-align">This is right aligned</h5>
      </div>
      <div>
        <h5 class="center-align">This is center aligned</h5>
      </div>
  • Quick Float: There are other classes that is used to align the content are left and right.
    <div class="left">...</div>
    <div class="right">...</div>

2. Hiding/Showing content: To hide/show content on specific screen, materialize provides easy to use classes.

Class Screen Range
hide Hidden from all devices
hide-on-small-only Hidden for Mobile Only
hide-on-med-only Hidden for Tablet Only
hide-on-med-and-down Hidden for Tablet and Below
hide-on-med-and-up Hidden for Tablet and Above
hide-on-large-only Hidden for Desktop Only
show-on-small Show for Mobile Only
show-on-medium Show for Tablet Only
show-on-large Show for Desktop Only
show-on-medium-and-up Show for Tablet and Above
show-on-medium-and-down Show for Tablet and Below
<div class="hide-on-small-only">
This will be hidden from mobile screen
</div>

3. Formatting: These classes helps to format various content. These classes are – 

  • Truncation: To truncate long lines of text in an ellipsis, truncate class is added to the tag that contains text.
     <h4 class="truncate">
    This is an extremely long title that will be truncated
    </h4>
  • Hover: The hoverable is the hover class that is used to add animation for the box shadow.
    <div class="card-panel hoverable">
     Hoverable Card Panel
    </div>

Here is an example in which all of the above classes are used:




<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href=
        rel="stylesheet">
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
  
    <!--Let browser know website is 
        optimized for mobile-->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
    <div class="class green">
        <br>
        <div class="card-panel ">
            <div class="valign-wrapper">
                <h5>This is vertically aligned</h5>
            </div>
        </div>
        <div class="card-panel">
            <h5 class="left-align">
                This is left aligned
            </h5>
        </div>
  
        <div class="card-panel">
            <h5 class="right-align">
                This is right aligned
            </h5>
        </div>
  
        <div class="card-panel">
            <h5 class="center-align">
                This is center aligned
            </h5>
        </div>
        <div class="card-panel">
            <div class="left">...</div>
        </div>
        <div class="card-panel">
            <div class="right">...</div>
        </div>
  
        <div class="hide-on-small-only">
            Hidden for mobile only</div>
        <div class="hide-on-med-only    ">
            Hidden for Tablet Only </div>
        <div class="hide-on-large-only">
            Hidden for Desktop Only</div>
  
        <div class="card-panel">
            <h4 class="truncate">
                This is an extremely long text 
                that will be truncated to show 
                the changes.
            </h4>
        </div>
  
  
        <div class="card-panel hoverable center">
            this is hoverable
        </div>
        <br><br>
    </div>
  
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
  
</html>


Output:



Last Updated : 16 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads