Blaze UI is a free open-source front-end framework. It provides us with an outstanding structure that helps us to form a strong and maintainable foundation for websites and all the components are developed keeping mobile responsiveness a priority in order that they work on any screen size. It offers us many useful components like accordions, autocomplete, avatars, breadcrumbs, etc which enables us to style and build sites comfortably.
In this article, we will learn about the visibility display using Blaze UI. Visibility is the Blaze UI class that helps us to toggle the visibility and appearance of an element and the main goal of using these classes is to let us toggle the visibility and appearance of the elements at specific breakpoints. You can make any webpage responsive using this class.
Display Visibility Classes:
- u-display-none: This class is used to make the element disappear.
- u-display-initial: This class is used to revert the display characteristics of an element to the default.
- u-display-inline: This class is used to display an element as an inline element, no height or width property has any effect.
- u-display-inline-block: This class is used to display an element as an inline-level block container.
- u-display-block: This class is used to display an element as a block element and it starts from a new line and takes up all the width available.
- u-display-table: This class is used to display an element as a table element.
- u-display-table-cell: This class is used to represent the element as a cell of a table or like an <td> element.
- u-display-flex: This class is used to display the element as a block-level flex container.
- u-display-inline-flex: This class is used to display the element as an inline-level flex container.
Visibility Classes:
- u-visible: This class is used to keep the element visible. It is the default value.
- u-invisible: This class is used to hide the element. But the space is still occupied.
- u-visually-hidden: This class is used to hide on normal screens but visible on assistive technologies like screen-readers.
Syntax:
<div class="class_name"> ... </div>
Example: The code below shows the usage of u-display-inline-block.
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">
<link rel="stylesheet" href=
<title>Blaze UI Visibility</title>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Blaze UI Visibility</h3>
<div class="u-display-inline-block u-large" style="background: grey; height: 3rem;
padding: 0.7rem; margin: 2rem">
<span style="background: black; width: 3rem;
color: white">
Geeks
</span>
<span class="" style="background: black;
width: 3rem; color: white">
for
</span>
<span class="" style="background: black;
width: 3rem; color: white">
Geeks
</span>
</div>
<div class="u-display-inline-block u-large" style="background: grey; height: 3rem;
padding: 0.7rem; margin: 2rem">
<span style="background: black; width: 3rem;
color: white">
Geeks
</span>
<span style="background: black; width: 3rem;
color: white">
for
</span>
<span style="background: black; width: 3rem;
color: white">
Geeks
</span>
</div>
<div class="u-display-flex u-large" style="background: grey; height: 3rem;
padding: 0.7rem; margin: 2rem">
<span style="background: black; width: 3rem;
color: white">
Geeks
</span>
<span style="background: black; width: 3rem;
color: white">
for
</span>
<span style="background: black; width: 3rem;
color: white">
Geeks
</span>
</div>
<div class="u-display-flex u-large" style="background: grey; height: 3rem;
padding: 0.7rem; margin: 2rem">
<span style="background: black; width: 3rem;
color: white">
Geeks
</span>
<span style="background: black; width: 3rem;
color: white">
for
</span>
<span style="background: black; width: 3rem;
color: white">
Geeks
</span>
</div>
</center>
</body>
</html>
|
Output:
Blaze UI | Visibility
Example 2: The code below shows the usage of u-display-inline-flex.
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">
<link rel="stylesheet" href=
<title>Blaze UI Visibility</title>
</head>
<body style="background:lightgrey;">
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Blaze UI Visibility</h3>
<div class="u-display-inline-flex u-large" style="background: black; height: 3rem;
padding: 0.7rem; margin: 2rem">
<span style=" width: 3rem; color: white">
Geeks
</span>
<span style=" width: 3rem; color: white">
for
</span>
<span style=" width: 3rem; color: white">
Geeks
</span>
</div>
<div class="u-display-inline-flex u-large" style="background: black; height: 3rem;
padding: 0.7rem; margin: 2rem">
<span style=" width: 3rem; color: white">
Geeks
</span>
<span style=" width: 3rem; color: white">
for
</span>
<span style=" width: 3rem; color: white">
Geeks
</span>
</div>
<div class="u-display-flex u-large" style="background: black; height: 3rem;
padding: 0.7rem; margin: 2rem">
<span style=" width: 3rem; color: white">
Geeks
</span>
<span style=" width: 3rem; color: white">
for
</span>
<span style=" width: 3rem; color: white">
Geeks
</span>
</div>
<div class="u-display-flex u-large" style="background: black; height: 3rem;
padding: 0.7rem; margin: 2rem">
<span style=" width: 3rem; color: white">
Geeks
</span>
<span style=" width: 3rem; color: white">
for
</span>
<span style=" width: 3rem; color: white">
Geeks
</span>
</div>
</center>
</body>
</html>
|
Output:
Blaze UI | visibility
Reference: https://www.blazeui.com/utils/visibility/