What is Blaze UI Containers Responsiveness?

In this article, we will learn Blaze UI Containers Responsiveness,This free Blaze-UI tutorial for complete beginners will help you learn Blaze-UI from scratch.

Blaze UI Containers Responsiveness - ❤️Blaze-UI Tutorials In 2024

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;">
        w3wiki
    </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>
            w3wiki is a portal for Beginner.
            It is a place where you can learn,
            share and get help from other Beginner.
            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;">
        w3wiki
    </h1>
 
    <h2 style="text-align:center;">
        Containers in Blaze UI
    </h2>
     
    <div class="o-container o-container--xsmall">
        <h3>x-small Container</h3>        
         
<p>
            w3wiki is a portal for Beginner.
            It is a place where you can learn,
            share and get help from other Beginner.
            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>
            w3wiki is a portal for Beginner.
            It is a place where you can learn,
            share and get help from other Beginner.
            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>
            w3wiki is a portal for Beginner.
            It is a place where you can learn,
            share and get help from other Beginner.
            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>
            w3wiki is a portal for Beginner.
            It is a place where you can learn,
            share and get help from other Beginner.
            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>
            w3wiki is a portal for Beginner.
            It is a place where you can learn,
            share and get help from other Beginner.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
        </p>
 
    </div>
</body>
</html>

Output: