Blaze UI Containers Wrapping

Last Updated : 19 Aug, 2022

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= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
  
    <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= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
    <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> 