Our templates come with pre-defined text alignment CSS classes that you can use easily. Instead of adding inline CSS to each module, it's recommended to use the classes listed below.
In this article
List of Classes
Type of Alignment | CSS Class |
Left Alignment | text-alignleft |
Center Alignment | text-aligncenter |
Right Alignment | text-aligncenter |
Justify Alignment | text-alignjustify |
Left Alignment (on mobile) | mb-text-alignleft |
Center Alignment(on mobile) | mb-text-aligncenter |
Right Alignment(on mobile) | mb-text-aligncenter |
Justify Alignment(on mobile) | mb-text-alignjustify |
Note: You'll just need to add 'mb-' at the beginning of each CSS class to set the alignment on mobile devices, below 768px.
How to use the CSS class:
1. Open the template from design manager, and open the template you want to edit.
2. Scroll to the module you want to edit
3. Click Settings > Edit CSS
4. A popup will appear and you can add the CSS class in the 'Custom CSS Class' input field
5. Click Save and Publish the template