Spectre Display utilities

Last Updated : 07 Feb, 2022

This class accepts more than one value in Spectre Display utilities. All the properties are covered as in class form. It is the alternative to the CSS display property. This class is used to define how the components (div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page. Display utilities are used for display and hidden things.

Spectre Display utility class:

d-block: It is used to display an element as a block element.
d-inline: It is used to display an element as an inline element.
d-inline-block: It is used to display an element as an inline-level block container.
d-flex: It is used to display an element as a block-level flex container.
d-inline-flex: It is used to display an element as an inline-level flex container.
d-none: It is used to disappear the container.
d-hide: It is used to remove the element.
d-visible: It is used to make the container visible.
d-invisible: It is used to make the container invisible.
text-hide: It is used to hide the text from the element.
text-assistive: It is used to assist the texts.

Syntax:

<div class="d-block">
  ....
</div>

Example: Below example illustrate the Spectre Display utilities. We will use first five classes similarly, you can use other classes as per your requirement.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SPECTRE Display Class</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <strong>SPECTRE Display Class</strong> 
        <br><br> 
    </center> 
    <div class="container"> 
      <strong>Display d-block Class:</strong> 
      <br> 
      <div class="columns d-block"> 
        <div class="column bg-success col-4">col-4</div> 
        <div class="column bg-primary col-4">col-4</div> 
        <div class="column bg-warning col-4">col-4</div> 
      </div> 
    </div> 
    <div class="container"> 
      <strong>Display d-inline Class:</strong> 
      <br> 
      <div class="columns d-inline"> 
        <div class="column bg-success col-4">col-4</div> 
        <div class="column bg-primary col-4">col-4</div> 
        <div class="column bg-warning col-4">col-4</div> 
      </div> 
    </div> 
    <div class="container"> 
      <strong>Display d-inline-block Class:</strong> 
      <br> 
      <div class="columns d-inline-block"> 
        <div class="column bg-success col-4">col-4</div> 
        <div class="column bg-primary col-4">col-4</div> 
        <div class="column bg-warning col-4">col-4</div> 
      </div> 
    </div> 
    <div class="container"> 
      <strong>Display d-flex Class:</strong> 
      <br> 
      <div class="columns d-flex"> 
        <div class="column bg-success col-4">col-4</div> 
        <div class="column bg-primary col-4">col-4</div> 
        <div class="column bg-warning col-4">col-4</div> 
      </div> 
    </div> 
    <div class="container"> 
      <strong>Display d-inline-flex Class:</strong> 
      <br> 
      <div class="columns d-inline-flex"> 
        <div class="column bg-success col-4">col-4</div> 
        <div class="column bg-primary col-4">col-4</div> 
        <div class="column bg-warning col-4">col-4</div> 
      </div> 
    </div> 
</body> 
</html>