- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Text Alignment
Description
Text of an element can be aligned by adding .text-left, .text-right, .text-center or .textjustify classes. By putting a breakpoint in front of a text alignment class, will make the alignment only to apply on that screen size or a larger one. For instance, .medium-textcenter will align the text to the left on smallest screens, but changes to the center when screen size is medium and larger.
Example
The following example demonstrates the use of text alignment in Foundation.
<html> <head> <title>Text Alignment</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script> </head> <body> <p class = "text-left">Foundation is one of the advanced front-end framework for designing beautiful responsive websites. It works on all types of devices and provides you with HTML, CSS and JavaScript plugins. </p> <p class = "text-right">Foundation is one of the advanced front-end framework for designing beautiful responsive websites. It works on all types of devices and provides you with HTML, CSS and JavaScript plugins. </p> <p class = "text-center">Foundation is one of the advanced front-end framework for designing beautiful responsive websites. It works on all types of devices and provides you with HTML, CSS and JavaScript plugins. </p> <p class = "text-justify">Foundation is one of the advanced front-end framework for designing beautiful responsive websites. It works on all types of devices and provides you with HTML, CSS and JavaScript plugins. </p> <p class = "medium-text-center">Foundation is one of the advanced front-end framework for designing beautiful responsive websites. It works on all types of devices and provides you with HTML, CSS and JavaScript plugins. </p> <script> $(document).ready(function() { $(document).foundation(); }) </script> </body> </html>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given html code typography_text_alignment.html file.
Open this HTML file in a browser, an output is displayed as shown below.
foundation_typography_helpers.htm
Advertisements