Skip to content
Related Articles

Related Articles

Blaze UI Containers

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Jun, 2022
View Discussion
Improve Article
Save Article

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 SizesBelow 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=
</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=
</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>

Output:

 

References: https://www.blazeui.com/objects/containers


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!