Primer CSS Responsive Container Padding
Last Updated :
14 May, 2022
Primer CSS is a free open-source CSS framework based on concepts that set the foundation for basic design components such as space, font, and color. Because of their systematic structure, these patterns are both stable and interoperable. Its CSS approach is informed by Object-Oriented CSS concepts, core CSS, and BEM architecture. It's incredibly adaptable and reusable. It was made with the help of the GitHub design system.
The Padding can be used to add the space around an element's inner contents within any border that surrounds it in CSS. The global spacing scale is used in Primer CSS to determine how much padding will be added, ensuring that the horizontal and vertical padding is uniform. We may create different layouts with the same styles by using these tools since it helps us reduce the quantity of custom CSS that has the same characteristics. The Responsive Container Padding Utility is a feature that allows us to add some predefined amount of padding to a container with the change of breakpoints.
Primer CSS Responsive Container Padding Utility Classes:
- p-responsive: This class can be used to add padding to either side of the element, which intends to be used with different container styles.
- 0 to sm sized screens: It will add element padding of $spacer-3 which is equivalent to 16px.
- sm to lg sized screens: It will add element padding of $spacer-6 which is equivalent to 40px.
- lg and wider sized screens: It will add element padding of $spacer-3 which is equivalent to 16px.
Adding these classes to the container is equivalent to adding .px-3 .px-sm-6 .px-lg-3 to it.
Syntax:
<div class="p-responsive">Content...</div>
Example 1: This example illustrates the implementation of Responsive Container Padding in Primer CSS. Here, we have used the p-responsive to a div container.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
<title>
Primer CSS Responsive Container Padding
</title>
</head>
<body>
<div class="m-4">
<h1 class="color-fg-success">GeeksforGeeks</h1>
<h3>Primer CSS Responsive Container Padding</h3>
</div>
<div class="p-responsive color-bg-open-emphasis
d-inline-block m-3">
<div class="color-bg-inset color-fg-open p-1">
Hello Geeks my Padding changes with custom
values when my size changes!!
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we have implemented 2 inline containers having the .p-responsive class that shows that by adjusting the screen width, both the containers also adjust their size according to the screen width.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
<title>
Primer CSS Responsive Container Padding
</title>
</head>
<body>
<div class="m-4">
<h1 class="color-fg-success">GeeksforGeeks</h1>
<h3>Primer CSS Responsive Container Padding</h3>
</div>
<div class="p-responsive color-bg-open-emphasis
d-inline-block m-3">
<div class="color-bg-inset color-fg-open p-1">
First Container
</div>
</div>
<div class="p-responsive color-bg-success-emphasis
d-inline-block m-3">
<div class="color-bg-inset color-fg-open p-1">
Second Container
</div>
</div>
</body>
</html>
Output:
Reference: https://primer.style/css/utilities/padding#responsive-container-padding
Similar Reads
Primer CSS Responsive Padding Primer CSS is a free open-source CSS framework built on systems that lay the groundwork for basic style elements like spacing, typography, and color. Our patterns are both stable and interoperable because of their systematic structure. Object-Oriented CSS principles, core CSS, and BEM architecture i
3 min read
Primer CSS Responsive Margins 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
2 min read
Primer CSS Responsive Borders 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
3 min read
Primer CSS Responsive Grids 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
3 min read
Primer CSS Grid Containers 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. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach e
2 min read
Primer CSS Uniform Padding 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
2 min read
Bootstrap 5 Containers Responsive Containers Bootstrap 5 Containers Responsive containers are used to group HTML elements and also provide support for grid layout. It has in-built responsiveness which is helpful while development. Bootstrap 5 Responsive Container Classes:container-sm: Container small is a class that styles a container that has
3 min read
Primer CSS Padding Padding is used to create space around the element, inside any defined border. We can set different padding for individual sides(top, right, bottom, left). It is important to add border properties to implement padding properties.Primer CSS Padding:Shorthand: Padding has many variations, that can be
3 min read
CSS Container Queries ​CSS Container Queries are a feature in web design that allow elements to adjust their styles based on the size of their parent container, rather than the overall viewport. This means that components can be more flexible and responsive to their immediate surroundings, leading to designs that adapt s
4 min read
Primer CSS Reset Margins Primer CSS is an open-source component-rich CSS library that helps developers to develop beautiful and responsive websites which work on devices of any screen size. It has a wide range of components that fulfills the need of any website. In this article, we will be seeing Primer CSS Reset Margins. T
3 min read