Skip to content
Related Articles

Related Articles

Blaze UI Containers Nesting

View Discussion
Improve Article
Save Article
  • Last Updated : 30 May, 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. In this article, we’ll see how to nest two or more containers in blaze UI. Nesting means adding one container inside another container. The containers provide the media query screen width restrictions on our content.

Pre-requisite: Blaze UI Containers

Blaze UI Containers Nesting classes: For nesting containers, no specific class is used for containers rather we add one container class inside another container class using container classes. There are different container classes and sizes which are also discussed below:

  • 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.

Container Sizes classes:

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

Syntax:

<div class="o-container o-container--xlarge">
    <div class="o-container o-container--medium">
        ...
    </div>
</div>

Example 1: Below example demonstrates the Nesting of two containers.

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" />
    <title>Blaze UI</title>
    <link rel="stylesheet" href=
</head>
 
<body>
    <h1 style="text-align: center; color: green;">
        GeeksforGeeks
    </h1>
 
    <h2 style="text-align: center">
        Blaze UI Containers Nesting
    </h2>
 
    <div class="o-container o-container--xlarge"
         style="background-color: green; padding: 20px;">
        <div class="o-container o-container--medium"
             style="background-color: lightgreen; padding: 10px;">
            <h3>GeeksforGeeks</h3>
             
<p>
                It 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>
</body>
 
</html>


Output:

 

Example 2: Below example demonstrates the Nesting of three containers.

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" />
    <title>Blaze UI</title>
    <link rel="stylesheet" href=
</head>
 
<body>
    <h1 style="text-align: center;
               color: green">GeeksforGeeks</h1>
    <h2 style="text-align: center">
          Blaze UI Containers Nesting</h2>
 
    <div class="o-container o-container--super"
         style="background-color: red; padding: 30px;">
        <div class="o-container o-container--xlarge"
             style="background-color: green; padding: 20px;">
            <div class="o-container o-container--medium"
                 style="background-color: lightgreen; padding: 10px;">
                <h3>GeeksforGeeks Premium</h3>
                 
<p>
                    GeeksforGeeks Premium is a premium portal
                    for geeks where they get ad free articles,
                    free access to job portal, doubt assistance.
                </p>
 
            </div>
        </div>
    </div>
</body>
 
</html>


Output: 

 

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!