Open In App

Primer CSS Breakpoint and Up

Improve
Improve
Like Article
Like
Save
Share
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 will see about Primer CSS Breakpoint and up. Breakpoints are used when using responsiveness in our application. There are 5 breakpoints classes in Primer CSS, and these classes become active when a specific screen size reaches.

Primer CSS Breakpoint and up classes:

  • d-{value}: This class is used when no breakpoint is needed.
  • d-{breakpoint}-{value}: This class is used for sm, md, lg, and xl breakpoints. For example, d-md-inline.
  • hide-md: This class is used to hide an element if the browser’s screen width is between sm-md i.e between 544px – 767px.

Primer CSS Breakpoints:

Breakpoint Syntax active when
None from 0 px upwards
Small sm from 544px upwards
Medium md from 768px upwards
Large lg from 1012px upwards
Extra-large xl from 1280px upwards

Syntax:

  • For showing elements on specific breakpoints
<div class="d-none d-sm-inline d-md-none">
    ...
</div>
  • For hiding specific elements
<div class="hide-md">
    ...
</div>

Example 1: Below example demonstrates the breakpoints in Primer CSS.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <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>
    <center>
        <div class="m-4">
            <h1 style="color:green">GeeksforGeeks</h1>
            <h2 class="mb-4">Primer CSS Breakpoints and up</h2>
  
            <div class="d-inline p-2 color-bg-success-emphasis">
                Visible on all screen-size
            </div>
  
            <div class="d-none d-sm-inline d-md-none p-2 
                        color-bg-attention-emphasis text-white">
                Only Visible on 544px upwards screen-size
            </div>
  
            <div class="d-none d-md-inline d-lg-none p-2 
                        color-bg-danger-emphasis text-white">
                Only Visible on 768px upwards screen-size
            </div>
  
            <div class="d-none d-lg-inline d-xl-none p-2 
                       color-bg-accent-emphasis text-white">
                Only Visible on 1012px upwards screen-size
            </div>
  
            <div class="d-none d-xl-inline p-2 
                       color-bg-attention-emphasis text-black">
                Only Visible on 1280px upwards screen-size
            </div>
        </div>
    </center>
</body>
</html>


Output:

 

Example 2: Another example demonstrating how the element is hidden when using breakpoints in Primer CSS.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <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>
    <center>
        <div class="m-4">
            <h1 style="color: green">GeeksforGeeks</h1>
            <h2 class="mb-4">Primer CSS Breakpoint and up</h2>
  
            <div class="color-bg-success-emphasis hide-md">
              Div will hide when the md breakpoint is active
            </div>
        </div>
    </center>
</body>
</html>


Output:

 

Reference: https://primer.style/css/support/breakpoints#breakpoint-and-up-



Last Updated : 02 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads