Blaze UI Input Group Stacked - Coding

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

In this article, we will be seeing Blaze UI Input Group Stacked. To make all the input elements stack over one another the c-input-group–stacked class is used on the input group container.

Blaze UI Input Group Stacked Classes:

c-input-group–stacked: This class is used on the input group container to stack all the input elements in it over one another.

Syntax:

<div class="c-input-group c-input-group--stacked">
    ...
</div>

Example1: The below example shows how to use c-input-group–stacked to stack input elements.

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"> 
    <title>Blaze UI - Input Group Stacked</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css"> 
  
    <style> 
        body{ 
            font-family: sans-serif; 
        } 
    </style> 
</head> 
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;">GeeksforGeeks</h2> 
        <h3>Input Group Stacked - Blaze UI</h3> 
    </div> 
    <div class="u-window-box-super"> 
        <div class="c-input-group c-input-group--stacked"> 
            <div class="o-field"> 
                <input class="c-field" placeholder="Input on Top"> 
            </div> 
            <div class="o-field"> 
                <input class="c-field" placeholder="Input in Middle"> 
            </div> 
            <div class="o-field"> 
                <input class="c-field" placeholder="Input in Last"> 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: This example shows different input elements stacked over one another.

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"> 
    <title>Blaze UI - Input Group Stacked</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css"> 
    <style> 
        body{ 
            font-family: sans-serif; 
        } 
    </style> 
</head> 
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;">GeeksforGeeks</h2> 
        <h3>Input Group Stacked - Blaze UI</h3> 
    </div> 
    <div class="u-window-box-super"> 
        <div class="c-input-group c-input-group--stacked"> 
            <div class="o-field"> 
                <input class="c-field" placeholder="Text Input"> 
            </div> 
            <div class="o-field"> 
                <textarea class="c-field" 
                placeholder="Textarea Input"></textarea> 
            </div> 
            <div class="o-field"> 
                <select class="c-field"> 
                    <option>Choose an option</option> 
                    <option>Option 1</option> 
                    <option>Option 2</option> 
                </select> 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Output:

Reference: https://www.blazeui.com/components/inputs

Reffered: https://www.geeksforgeeks.org

CSS

Related
Primer CSS Box Shadow Remove
Primer CSS Typography Text Alignment
Blaze UI Input Group Fixed Width
Primer CSS Typography Heading Utilities
Primer CSS Typography Type scale Utilities

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	9