Blaze UI Containers Basic Grid
In this article, we’ll see about Container basic grid in Blaze UI. Blaze UI is a free, open-source UI toolkit to build a great website. It provides you with various features like responsiveness, custom components, etc. A grid is a very popular way to create a responsive layout and is very easy to use and flexible. For creating a container basic grid there are two classes used in Blaze UI which are discussed below.
Blaze UI Containers basic grid classes:
- .o-grid: This class is used to create a grid in Blaze UI.
- .o-grid__cell: This class is used to create a grid cell in Blaze UI.
Syntax:
<div class="o-container o-container--medium
o-grid o-grid--demo">
<div class="o-grid__cell">
<div class="o-grid-text">....</div>
</div>
<div class="o-grid__cell">
<div class="o-grid-text">....</div>
</div>
<div class="o-grid__cell">
<div class="o-grid-text">....</div>
</div>
</div>
Example 1: Below example demonstrates the basic grid in a container.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Blaze UI</ title >
< link rel = "stylesheet" href =
/>
</ head >
< body >
< div class = "u-centered" >
< h1 style = "color: green" >GeeksforGeeks</ h1 >
< h2 >Container Basic Grid in Blaze UI</ h2 >
</ div >
< div class="o-container o-container--xlarge
o-grid o-grid--demo">
< div class = "o-grid__cell"
style = "background-color: aqua;" >
< div class = "o-grid-text" >Courses</ div >
</ div >
< div class = "o-grid__cell"
style = "background-color: yellow;" >
< div class = "o-grid-text" >Jobs</ div >
</ div >
< div class = "o-grid__cell"
style = "background-color: tomato;" >
< div class = "o-grid-text" >
Coding Competitions
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Blaze UI Containers basic grid
Example 2: Below example demonstrates the basic grid in a container using input and button components.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Blaze UI</ title >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "u-centered" >
< h1 style = "color: green" >GeeksforGeeks</ h1 >
< h2 >Container Basic Grid in Blaze UI</ h2 >
</ div >
< div class="o-container o-container--xlarge
o-grid o-grid--demo">
< div class = "o-grid__cell" style =
"background-color: tomato; padding: 10px;" >
< h2 class = "o-grid-text" >Email</ h2 >
< input class = "c-field" placeholder =
"Enter your Email" type = "text" />
</ div >
< div class = "o-grid__cell" style =
"background-color: lightgreen; padding: 10px;" >
< h2 class = "o-grid-text" >Password</ h2 >
< input class = "c-field" placeholder =
"Enter your password" type = "password" />
</ div >
< div class = "o-grid__cell o-grid--bottom"
style = "background-color: lightcyan; padding: 10px;" >
< h2 class = "o-grid-text" >Sign Up</ h2 >
< button type = "button" class="c-button c-button--rounded
c-button--ghost c-button--success">
Sign Up
</ button >
</ div >
</ div >
</ body >
</ html >
|
Output:
Blaze UI Containers basic grid
Reference: https://www.blazeui.com/objects/grid
Last Updated :
26 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...