Blaze UI Containers Responsiveness

Last Updated : 22 Aug, 2022

In this article, we will learn about container responsive behavior 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. 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 Responsive 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 Used:

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

Syntax:

<div class="class_name">
   ...
</div>

Example 1: In the below code, we will make use of the above classes to see the responsive behaviour.

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>Responsive 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>
</body>
</html>

Output:

Example 2: In the below code, we will make use of the above classes to see the responsive behaviour.

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 green;
        }
    </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>
</body>
</html>