Skip to content
Related Articles

Related Articles

Primer CSS Layout Sidebar Positioning

View Discussion
Improve Article
Save Article
  • Last Updated : 26 May, 2022
View Discussion
Improve Article
Save Article

Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.

In this article, we’ll see about Layout Sidebar positioning. We can change the position of the sidebar either to the start/left or end/right. 

Primer CSS Layout Sidebar positioning Classes:

  • Layout–sidebarPosition-start: This class is used to set the sidebar position to the start or at the left. This is the default positioning of the sidebar.
  • Layout–sidebarPosition-end: This class is used to set the sidebar position to the end or at the right.

Syntax:

<div class="Layout Layout--sidebarPosition-start">
  <div class="Layout-main border">...</div>
  <div class="Layout-sidebar border">...</div>
</div>

Example 1: Below example demonstrates the layout sidebar with the start position.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0" />
    <title>Primer CSS</title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
          rel="stylesheet" />
</head>
  
<body>
    <div class="m-4">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h2>
            Primer CSS Layout Sidebar Position
        </h2
    </div>
    <div class="Layout Layout--sidebarPosition-start m-4">
        <div class="Layout-main border
                    p-2 color-bg-success">
            GeeksforGeeks
        </div>
        <div class="Layout-sidebar border 
                    p-2 color-bg-accent">
            Learn more about it here.
        </div>
    </div>
</body>
</html>


Output:

 

Example 2: Below example demonstrates the layout sidebar with end position.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0" />
    <title>Primer CSS</title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
          rel="stylesheet" />
</head>
  
<body>
    <div class="m-4">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h2>
            Primer CSS Layout Sidebar Position
        </h2
    </div>
    <div class="Layout Layout--sidebarPosition-end m-4">
        <div class="Layout-main border 
                    p-2 color-bg-danger">
            Welcome to the community!
        </div>
        <div class="Layout-sidebar border 
                    p-2 color-bg-success">
            GeeksforGeeks
        </div>
    </div>
</body>
</html>


Output:

 

Reference: https://primer.style/css/components/layout#sidebar-positioning


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!