Blaze UI Containers

Last Updated : 13 Jun, 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.

In this article, we will learn about containers in Blaze UI.

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.

Blaze UI Container Sizes: Below is the sizes of containers that are used by the Blaze UI framework to create a container. The given sizes are the widths of containers.

$screen-width-xsmall: 20em
$screen-width-small: 30em
$screen-width-medium: 48em
$screen-width-large: 64em
$screen-width-xlarge: 78em
$screen-width-super: 116em

Syntax:

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

Example 1: Below example demonstrates all containers sizes 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/[email protected]/dist/blaze/blaze.css" />
</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:

Example 2: Below example demonstrates the Button 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/[email protected]/dist/blaze/blaze.css" />
</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" 
        style="background-color:blanchedalmond;">
        <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" 
        style="background-color:yellowgreen ;">
        <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" 
        style="background-color:steelblue;">
        <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" 
        style="background-color:indianred;">
        <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" 
        style="background-color:aqua;">
        <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" 
        style="background-color:palegreen;">
        <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>