Blaze UI Containers Nesting

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.

Output:

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

Output: 

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