Foundation CSS Prototyping Utilities Display Classes

Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilities Display Classes in Foundation CSS.

In Foundation CSS, Prototyping Utilities Display Classes are used to alter the display property of any element.

Foundation CSS Prototyping Utilities Display Classes:

display-inline: This class is used to make the current block of elements on the same line.
display-inline-block: This class is used to make the element formatted as an inline element, but it can apply height and width values.
display-block: This class is used to displays an element as a block element.
display-table: This class is used to set the behavior as <table> for all elements.
display-table-cell: This class is used to set the behavior as <td> for all elements.

Syntax:

<div class="Display-Classes">
     ...
</div>

Example 1: Below is the example that illustrates the use of the Prototyping Utilities display-inline class.

HTML

<!DOCTYPE html> 

<html> 

<head> 

  <title>Foundation CSS Prototyping Utilities Display-Inline</title> 

  <link rel="stylesheet"

        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css"

        crossorigin="anonymous"> 

  <link rel="stylesheet"

        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"

        crossorigin="anonymous"> 

  <link rel="stylesheet"

        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css"

        crossorigin="anonymous"> 

</head> 

<body> 

  <center> 

    <h2>GeeksforGeeks</h2> 

    <h3>Prototyping Utilities Display-Inline</h3> 

    <div class="button primary display-inline"> 

      GeeksforGeeks-1 

    </div> 

    <div class="button success display-inline"> 

      GeeksforGeeks-2 

    </div> 

  </center> 

</body> 

</html>

Output:

Foundation CSS Prototyping Utilities Display Classes

Example 2: Below is the example that illustrates the use of the Prototyping Utilities display-block class.

HTML

<!DOCTYPE html> 

<html> 

<head> 

  <title>Foundation CSS Prototyping Utilities Display-Inline</title> 

  <link rel="stylesheet"

        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css"

        crossorigin="anonymous"> 

  <link rel="stylesheet"

        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"

        crossorigin="anonymous"> 

  <link rel="stylesheet"

        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css"

        crossorigin="anonymous"> 

</head> 

<body style="margin-inline: 10rem;"> 

  <center> 

    <h2>GeeksforGeeks</h2> 

    <h3>Prototyping Utilities Display-block</h3> 

    <div class="button primary display-block"> 

      GeeksforGeeks-1 

    </div> 

    <div class="button success display-block"> 

      GeeksforGeeks-2 

    </div> 

  </center> 

</body> 

</html>