Blaze UI Containers

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.

Output:

Example 2: Below example demonstrates the Button in Blaze UI.

Output:

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