Primer CSS Layout Sidebar Positioning Last Updated : 26 May, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 Comment More infoAdvertise with us Next Article Primer CSS Layout Sidebar Positioning T tarunsinghwap7 Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Component Similar Reads Primer CSS Layout Sidebar positioning as rows 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 2 min read Primer CSS Layout Position Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns ar 3 min read Primer CSS Layout Sidebar Sizing 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 wil 2 min read Angular PrimeNG Sidebar Position Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the Sidebar Position in Angular PrimeNG. We will also learn 3 min read Primer CSS Layout - Nesting Layouts 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 wil 2 min read Like