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 –
Here is an example in which all of the above classes are used:
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" >
< link rel = "stylesheet" href =
< 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 >
< script src =
</ script >
</ body >
</ html >
|
Output:
Last Updated :
16 May, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...