Blaze UI Containers Widths

Last Updated : 27 Apr, 2022

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is available open-source so a large community maintains it.

Blaze UI Containers provide a media screen of different widths to put the content inside it according to different requirements. The containers have sizes ranging from small to super big.

Classes used to set Blaze UI Containers Widths:

o-container–xsmall: The size is 20em.
o-container–small: The size is 30em.
o-container–medium: The size is 48em
o-container–large: The size is 64em
o-container–xlarge: The size is 78em
o-container–super: The size is 116em

Syntax: Define a container with a fixed size as follows:

<div class="o-container o-container--large">
    GeeksforGeeks
</div>

Example 1: In the following example, we have containers with different widths.

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>GeeksforGeeks | BlazeUI</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
</head> 
<body> 
    <div class="o-container"> 
        <center> 
            <div> 
                <h1 style="color: green;">GeeksforGeeks</h1> 
            </div> 
            <strong>Blaze UI Containers</strong> 
            <br /> 
            <br /> 
        </center> 
        <div style="background-color: lightgreen;  
                    margin-bottom: 2rem;"  
            class="o-container o-container--xsmall"> 
            Data Structures 
        </div> 
        <div style="background-color: lightgreen;  
                    margin-bottom: 2rem;"  
            class="o-container o-container--small"> 
            Algorithms 
        </div> 
        <div style="background-color: lightgreen;  
                    margin-bottom: 2rem;"  
            class="o-container o-container--medium"> 
            Machine Learning 
        </div> 
        <div style="background-color: lightgreen;  
                    margin-bottom: 2rem;"  
            class="o-container o-container--large"> 
            Competitive Programming 
        </div> 
        <div style="background-color: lightgreen;  
                    margin-bottom: 2rem;"  
            class="o-container o-container--xlarge"> 
            Java 
        </div> 
        <div style="background-color: lightgreen;  
                    margin-bottom: 2rem;"  
            class="o-container o-container--super"> 
            Python3 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: In the following example, we have different buttons to change the size of the container.

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>GeeksforGeeks | BlazeUI</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
<body> 
    <div class="o-container"> 
        <center> 
            <div> 
                <h1 style="color: green;">GeeksforGeeks</h1> 
            </div> 
            <strong>Blaze UI Containers</strong> 
            <br /> 
            <br /> 
            <button onclick="changeSize('o-container--xsmall')"> 
                XSmall 
            </button> 
            <button onclick="changeSize('o-container--small')"> 
                Small 
            </button> 
            <button onclick="changeSize('o-container--medium')"> 
                Medium 
            </button> 
            <button onclick="changeSize('o-container--large')"> 
                Large 
            </button> 
            <button onclick="changeSize('o-container--xlarge')"> 
                XLarge 
            </button> 
            <button onclick="changeSize('o-container--super')"> 
                Super 
            </button> 
        </center> 
        <div id="container" style="background-color: lightgreen;  
                margin-bottom: 2rem;" 
            class="o-container o-container--xsmall"> 
            Data Structures 
        </div> 
    </div> 
    <script> 
        let currentSize = 'o-container--xsmall' 
        function changeSize(size) { 
            $('#container').toggleClass(currentSize) 
            currentSize = size 
            $('#container').toggleClass(currentSize) 
        } 
    </script> 
</body> 
</html>