Categories
28°C, New York
Home Blaze-UI Blaze UI Containers

Blaze UI Containers

Blaze UI Introduction

Blaze UI Panels

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/css@x.x.x/dist/blaze/blaze.css" />
</head>
 
<body>
    <h1 style="text-align:center; color:green;">
        w3wiki
    </h1>
 
    <h2 style="text-align: center;">
        Containers in Blaze UI
    </h2>
     
    <div class="o-container o-container--xsmall">
        <h3>x-small Container</h3>
         
<p>
            w3wiki is a portal for Beginner.
            It is a place where you can learn,
            share and get help from other Beginner.
            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>
            w3wiki is a portal for Beginner.
            It is a place where you can learn,
            share and get help from other Beginner.
            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>
            w3wiki is a portal for Beginner.
            It is a place where you can learn,
            share and get help from other Beginner.
            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>
            w3wiki is a portal for Beginner.
            It is a place where you can learn,
            share and get help from other Beginner.
            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>
            w3wiki is a portal for Beginner.
            It is a place where you can learn,
            share and get help from other Beginner.
            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>
            w3wiki is a portal for Beginner.
            It is a place where you can learn,
            share and get help from other Beginner.
            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/css@x.x.x/dist/blaze/blaze.css" />


</head>


 


<body>


    <h1 style="text-align:center; color:green;">


        w3wiki


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


            w3wiki is a portal for Beginner. 


            It is a place where you can learn,


            share and get help from other Beginner. 


            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>


            w3wiki is a portal for Beginner. 


            It is a place where you can learn,


            share and get help from other Beginner. 


            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>


            w3wiki is a portal for Beginner. 


            It is a place where you can learn,


            share and get help from other Beginner. 


            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>


            w3wiki is a portal for Beginner. 


            It is a place where you can learn,


            share and get help from other Beginner. 


            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>


            w3wiki is a portal for Beginner. 


            It is a place where you can learn,


            share and get help from other Beginner. 


            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>


            w3wiki is a portal for Beginner. 


            It is a place where you can learn,


            share and get help from other Beginner. 


            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

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
													
											

											
										

									

									

										
										
Tags:

										
										#Blaze-UI
										
										#Blaze-UI Object
										
										#CSS
										
										#Web Technologies
										
										

									

									

										

											
											
												
												Blaze UI Introduction
											
											
										

										

											
											
												Blaze UI Panels