How to use materialize helper classes - deesoft service

How to use materialize helper classes

Deepak Tailor Image
Deepak Tailor - Dec 30 2020
How to use materialize helper classes

Some helpers are given in the materialize. Which makes the design even easier. Such as a text helper that works to set the alignment of text. The float helper that contains the container to set it to the left position or right position. Hide / Show Content In this class, we can show or heighten content in any screen size. Hover class allows us to set hover.

How to set alignment in text and container

You can easily vertically center things by adding the class valign-wrapper to the container holding the items you want to vertically align.

Live Demo 
<div class="valign-wrapper" style="height: 100vh;">
    <h5>This should be vertically aligned</h5>
</div>
How to set text align

We have 3 alignments in the text align. Such as left align, right align, center align etc. These classes work to left, right, center.

<h5 class="left-align">this is left align</h5>
<h5 class="right-align">this is right align</h5>
<h5 class="center-align">this is center align</h5>
How to set floats

With float we can set any container in left position or right position.

<div>
    <h5 class="left">Left Float</h5>
    <h5 class="right">Right Float</h5>
</div>
How to use Hide / Show classes

When we use Hide / Show class. That any section, text, container have to be hidden and show on a specific screen.

Live Demo

1. .hide

2. .hide-on-small-only

3. .hide-on-med-only

4. .hide-on-med-and-up

5. .hide-on-large-only

6. .show-on-small

7. .show-on-medium

8. .show-on-large

9. .show-on-medium-and-up

10. .show-on-medium-and-down

<div>
    <h5>Hide / Show Classes</h5>
    <h5 class="hide">hide all screen</h5>
    <h5 class="hide-on-small-only">hide on small screen</h5>
    <h5 class="hide-on-med-only">hide on medium screen</h5>
    <h5 class="hide-on-med-and-down">hide on medium screen & small screen</h5>
    <h5 class="hide-on-med-and-up">hide on medium screen & large screen</h5>
    <h5 class="hide-on-large-only">hide on large screen</h5>
    <br/>
    <h5 class="show-on-small">show on small screen</h5>
    <h5 class="show-on-medium">show on medium screen</h5>
    <h5 class="show-on-large">show on large screen</h5>
    <h5 class="show-on-medium-and-up">show on medium screen & large screen</h5>
    <h5 class="show-on-medium-and-down">show on medium screen & small screen</h5>
</div>
How to use truncate class

If a paragraph is of more line then we can truncate that paragraph. To shorten it.

<h5 class="truncate">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A iusto eaque, quia optio, ea illo perferendis eos cupiditate architecto laudantium blanditiis repudiandae natus cumque dignissimos officia, reiciendis magni facilis quis.</h5>
How to set hover class

If you want to apply a hover effect on which card or image, then we use the Howerable class.

<div class="card-panel hoverable">hover class</div>
<img src="mobile.jpg" class="responsive-img hoverable" />
Deepak Tailor Image
Deepak Tailor

My name is Deepak tailor as a fullstack developer. I have been in the IT industry (PHP, Nodejs, flutter) for the last 5 years. For professional and customize web development & app development, you can send inquiry on our email.
----
You can contact him at deepaktailor10@yahoo.in