Primer CSS Typography Responsive Text Alignment

Last Updated : 19 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

In this article, we will learn about Typography Responsive Text Alignment. Typography Responsive Text Alignment is used to align the text based on the screen size. For eg, Text should be left-aligned if the screen size is small and right-aligned if the screen is big.

Typography Responsive Text Alignment Classes:

text-[ * ]-left : Text will be left aligned on mentioned screen size.
text-[ * ]-center: Text will be center on aligned mentioned screen size.
text-[ * ]-right : Text will be right aligned on mentioned screen size.

For example, text-lg-left will left-align text for larger devices.

Note: screen-size * will be replaced with various screen sizes like sm (small), md (medium), lg (large).

Syntax:

<p class="text-[screen-size]-[alignment]" > 
       ...
</p>

Example 1: In this example, we will write some text and show how the alignment of the text will change as we change the screen size. Text is left-aligned when the screen is small. But when the screen is large, the text gets center aligned.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" 
        rel="stylesheet" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> Typography Responsive Text Alignment</h3> 
  
    <p class="text-left text-lg-center"
        style="color:red"> 
        GeeksforGeeks is a computer science portal 
    </p> 
  
</body> 
  
</html>

Output:

Example 2: In this example, we will write some text and show how the alignment of text appears in 3 different screen sizes. Text is right-aligned when the screen is large. But when the screen is moved, the text gets center-aligned and further left-aligned.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" 
        rel="stylesheet" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> Typography Responsive Text Alignment.</h3> 
  
    <p class="text-left text-sm-center text-lg-right"
        style="color:red;"> 
        GeeksforGeeks is a computer science portal 
    </p> 
  
</body> 
  
</html>