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
Please Login to comment...