Materialize CSS helpers provide different helper utility classes. These utility classes are primarily used for text alignment, coloring the element, hiding/showing the element, formatting the text, etc.
Here, we will discuss the following type of Materialize helpers utility classes.
Text can be aligned in the left, center, or right direction along the main axis i.e x-axis.
To align text in the horizontal left direction, assign the .left-align
class to the HTML element base class.
This should be left aligned
General Syntax
<element class="left-align"></element>
Source Code
<div class="container">
<h5 class="left-align">This should be left aligned</h5>
</div>
Source Code : Output
To align text in the right direction along the x-axis, add the right-align
class to the HTML element base class.
This should be right aligned
General Syntax
<element class="right-align"></element>
Source Code
<div class="container">
<h5 class="right-align">This should be right aligned</h5>
</div>
Source Code : Output
To align text in the center of the horizontal axis, use the center-align
class to the HTML element class.
This should be center aligned
General Syntax
<element class="center-align"></element>
Source Code
<div class="container">
<h5 class="center-align">This should be center aligned</h5>
</div>
Source Code : Output
Materialize CSS provides float classes that are used to align things either in the left direction or the right direction.
To float the things in the left direction use the left
class.
Left floated text
General Syntax
<element class="left"></element>
Source Code
<div class="container">
<h5 class="left">Float Left</h5>
</div>
Source Code : Output
To float the things in the right direction, use the right
class to the HTML element base class.
Right Floated Text
General Syntax
<element class="right"></element>
Source Code
<div class="container">
<h4 class="right">Right Aligned Text Using Float</h4>
</div>
Source Code : Output
To align the element vertically center, assign the valign-wrapper
class to the container base class that holds the aligning element.
vertically Aligned Text
General Syntax
<element class="valign-wrapper"></element>
Source Code
<div class="valign-wrapper" style="min-height:100px;">
<h5>This should be vertically aligned</h5>
</div>
Source Code : Output
Materialize CSS provides different predefined classes for displaying & hiding the text content with respect to the device viewport width. Let us understand the predefined hiding and showing classes.
.hide
- Hidden for 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 BelowSource Code
<div class="container">
<div class="row hide-on-small-only">
<div class="card-panel amber">
<h5 class="center-align">Hide Only Small Screens</h5>
</div>
</div>
</div>
Source Code : Output
To truncate long lines of text in an ellipsis, add the .truncate class to the HTML element base class.
Shape Your Path is a world one of the most popular learning platforms for HTML5, CSS3, Javascript, Jquery, JSON, materialize CSS, Bulma, Pure, UIkit CSS framework,etc.
General Syntax
<element class="truncate"></element>
Source Code
<div class="container">
<div class="row">
<div class="col s12 ">
<div class="card-panel blue white-text">
<!-- Start truncate class -->
<h4 class="truncate">Shape Your Path provides tutorial on HTML5,CSS3,Javascript,Jquery,JSON,Materilaize CSS,Bulma,Pure,UIkit CSS framework,etc</h4>
<!-- End truncate class -->
</div>
</div>
</div>
</div>
Source Code : Output
The hover utility class is used to create an animation for box shadow. It can be used with most of the elements.
Hoverable Card Panel
General Syntax
<element class="hoverable"></element>
Source Code
<div class="container">
<div class="card-panel hoverable"> Hoverable Card Panel</div>
</div>
Source Code : Output
Materialize CSS helpers are used to align the text in the horizontal or vertical direction, showing or hiding content based on the device breakpoints, formatting the text in the form of truncation or hover.