Blaze UI Containers Responsive Suffixes

Last Updated : 19 Aug, 2022

In this article, we will learn how container-responsive suffixes work.

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.

Blaze UI Container Classes:

o-container: This class is used to create a container.
o-container–xsmall: This class is used to create an extra small container.
o-container–small: This class is used to create a small size container.
o-container–medium: This class is used to create a medium-size container.
o-container–large: This class is used to create a large size container.
o-container–xlarge: This class is used to create an extra-large size container.
o-container–super: This class is used to create a supersize container.

Variable Suffixes Used:

$screen-width-xsmall: 20em: This variable is used for extra small-sized resolution.
$screen-width-small: 30em: This variable is used for small-sized resolutions such as mobile phones.
$screen-width-medium: 48em: This variable is used for medium-sized resolutions such as tablet.
$screen-width-large: 64em: This variable is used for large-sized resolutions such as the small desktop.
$screen-width-xlarge: 78em: This variable is used for extra large-sized resolutions such as medium desktop.
$screen-width-super: 116em: This variable is used for super extra-sized resolutions such as the large desktop.

Syntax:

<div class="o-container o-container--xsmall">
   ...
</div>

Example 1: Below example demonstrates all container responsive suffixes in Blaze UI.

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> 
        body{ 
            margin:50px; 
        } 
        p{ 
            border:2px solid black; 
              
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="text-align:center;color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2 style="text-align:center;"> 
        Containers in Blaze UI 
    </h2> 
      
    <div class="o-container o-container--xsmall"> 
        <h3>x-small Container</h3>         
        <p> 
            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. 
        </p> 
    </div> 
    <div class="o-container o-container--small"> 
        <h3>small Container</h3>         
        <p> 
            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. 
        </p> 
    </div>     
</body> 
</html> 

Output:

Example 2: Below example demonstrates all container responsive suffixes in Blaze UI.

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; 
        } 
    </style> 
</head> 
<body> 
    <h1 style="text-align:center;color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2 style="text-align:center;"> 
        Containers in Blaze UI 
    </h2> 
      
    <div class="o-container o-container--xsmall"> 
        <h3>x-small Container</h3>         
        <p> 
            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. 
        </p> 
    </div> 
    <div class="o-container o-container--small"> 
        <h3>small Container</h3>         
        <p> 
            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. 
        </p> 
    </div> 
    <div class="o-container o-container--medium"> 
        <h3>medium Container</h3>         
        <p> 
            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. 
        </p> 
    </div> 
    <div class="o-container o-container--large"> 
        <h3>large Container</h3>         
        <p> 
            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. 
        </p> 
    </div> 
    <div class="o-container o-container--xlarge"> 
        <h3>x-large Container</h3>         
        <p> 
            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. 
        </p> 
    </div> 
    <div class="o-container o-container--super"> 
        <h3>super Container</h3>         
        <p> 
            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. 
        </p> 
    </div> 
</body> 
</html> 

Output:

Suggest improvement

Blaze UI Image Attributes

Angular PrimeNG Focus Trap Float Label

Share your thoughts in the comments

Blaze UI Containers Responsive Suffixes

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?