Skip to content
Related Articles
Open in App
Not now

Related Articles

Blaze UI Containers Responsive Suffixes

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

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=
  
    <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=
  
    <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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!