Skip to content
Related Articles
Open in App
Not now

Related Articles

Blaze UI Containers Wrapping

Improve Article
Save Article
  • Last Updated : 19 Aug, 2022
Improve Article
Save Article

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. There are various sizes of containers available in the Blaze UI framework that the users can use in their web applications to organize the paragraphs or articles, etc. The containers provide the media query screen width restrictions on our content.

Container Wrapping: It allows long containers to be able to be broken and wrap onto the next line. For example, if we take two containers with 55% width and 70% width then it is not possible to fit these two containers in a 100% width container. Thus the second container of 70% width will shift its position to the next line.

Classes Used:

  • o-grid–wrap class: This class is used to create the grid wraps in a proper way.

Example 1: In the below code, we will make use of the grid classes to make the grid and o-grid–wrap class to wrap the grids into containers in the next example.

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>
        p{
            border:2px solid black;
        }
        .gfg{
              border: 7px solid black;
              width:60%;
                
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="text-align:center; color:green;">
            GeeksforGeeks
        </h1>
  
        <h2 style="text-align: center;">
            Containers in Blaze UI
        </h2>
          
        <div class="o-grid o-grid--demo gfg">
            <div class="o-grid__cell o-grid__cell--width-50 
                        c-card__item c-card__item--success">
                <div class="o-grid-text">first</div>
            </div>
            <div class="o-grid__cell o-grid__cell--width-70 
                        c-card__item c-card__item--error">
                <div class="o-grid-text">second</div>
            </div>
        </div>
    </center>
</body>
</html>


Output:

 

Example 2: In the below code, we will make use of the o-grid–wrap class to wrap the container.

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>
        p{
            border:2px solid black;
        }
        .gfg{
              border: 7px solid black;
              width:60%;              
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="text-align:center; color:green;">
            GeeksforGeeks
        </h1>
  
        <h2 style="text-align: center;">
            Containers in Blaze UI
        </h2>
          
        <div class="o-grid o-grid--demo gfg o-grid--wrap">
            <div class="o-grid__cell o-grid__cell--width-50 
                       c-card__item c-card__item--success">
                <div class="o-grid-text">first</div>
            </div>
            <div class="o-grid__cell o-grid__cell--width-70 
                   c-card__item c-card__item--error">
                <div class="o-grid-text">second</div>
            </div>
        </div>
    </center>
</body>
  
</html>


Output:

 

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!