Primer CSS Layout

Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.

Primer CSS Layout is used to change the document layout with the help of classes that provide inline, block, table,  etc. which can customize the document. We can even change the layout and the direction of the float.

Primer CSS Layout Classes:

• Display: Used to change the display of the element. 
• Visibility: Used to change the visibility of the layout items.
• Overflow: The classes can be utilized to control the overflow of the elements.
• Float: Floating sets the direction of the element which is by default left.
• Alignment: Adjust the alignment of the elements with the following classes:
• Width and Height: We can set the width and height using the following classes:
• Position: Sets the position of the elements.
• Media object: Creates a media object container to hold layout utilities.

Syntax: Assign the layout classes to a container as follows:

<div class="d-inline border">
 <div class="d-inline-block border">
 Data Structures
 </div>
 <div class="d-inline-block border">
 Algorithms
 </div>
</div>

Example 1: In the following example, we have different display layout elements.

Output:

Example 2: In the following example, we are toggling the visibility of a container with the visibility classes.

Output: