Blaze UI Input Group Stacked
Last Updated :
13 Apr, 2022
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 =
< 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 =
< 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...