Primer CSS Right Aligned

Last Updated : 27 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 discuss Typography Text Right Alignment. Typography Text Right Alignment is used to right-align text.

Primer CSS Right aligned class:

text-right: This class is used to align the text to right.

Syntax:

<p class="text-right">
    ...
</p>

Example 1: In this example, we will write some text and use the text-right class to right-align it.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3> Typography Text Align</h3> 
  
    <h3 style="color:red">Text-Right</h3> 
    <p class="text-right"> 
        GeeksforGeeks is a Computer Science Portal 
    </p> 
</body> 
  
</html> 

Output:

Primer CSS Right aligned

Example 2: This is another example to demonstrate right-align using a heading tag.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Primer CSS Typography Text Align</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <center> 
        <div style="border: 2px solid green;  
        width: 500px; height: 400px;"> 
            <h1 style="color:green">GeeksforGeeks</h1> 
            <h3>Primer CSS Typography Text Align</h3> 
            <h3 class="text-right mt-5"> 
                GeeksforGeeks is a Computer Science Portal 
            </h3> 
        </div> 
    </center> 
</body> 
  
</html> 