Skip to content
Related Articles

Related Articles

Blaze UI Grid Offsets

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Jun, 2022
View Discussion
Improve Article
Save Article

Blaze UI is an open-source CSS framework. It is a lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. 

Blaze UI containers provide a media screen of different widths to put the content inside it according to different requirements. Use the o-grid__cell–offset-xx class to push a cell horizontally across the grid. 

Blaze UI Containers offsets classes:

  • .o-grid__cell–offset-xx: This class is used to set the offset of the container grid. In this class, xx represents the size of the container width.

Syntax:

<div class="o-grid o-grid--demo">
  ...
  <div class="o-grid__cell o-grid__cell--width-xx 
      o-grid__cell--offset-xx">
    ...
  </div>
</div>

Example: The following code demonstrates the o-grid__cell–offset-xx class using offset as 40.

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=
    <style>
        .o-container {
            margin: 0 40px;
        }
        .o-grid {
            border: 1px solid green;
        }
        .o-grid__cell {
            border: 1px solid blue;
        }
    </style>
</head>
  
<body>
    <h1 style="text-align:center; color:green;">
        GeeksforGeeks
    </h1>
  
    <h2 style="text-align: center;">
        Blaze UI Containers Offsets
    </h2>
  
    <div class="o-grid o-container">
        <div class="o-grid__cell o-grid__cell--width-30">
            <div class="o-grid-text">
                GeeksforGeeks is a portal for geeks.
                It is a place where you can learn,
                share and get help from other geeks.
                Find various things on the portal
                like Jobs, Hackathons, Programming
                Competitions, Coding Questions, etc.
            </div>
        </div>
        <div class="o-grid__cell o-grid__cell--width-30 
            o-grid__cell--offset-40">
            <div class="o-grid-text">
                GeeksforGeeks is a portal for geeks.
                It is a place where you can learn,
                share and get help from other geeks.
                Find various things on the portal
                like Jobs, Hackathons, Programming
                Competitions, Coding Questions, etc.
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

 

Reference: https://www.blazeui.com/objects/grid


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!