Bulma - Container and levels

Bulma uses containers to represent a basic layout element and wrap the site contents. The container class will have below values for width on different devices −
The desktop will have maximum width of 960px.
The desktop will have maximum width of 960px.
The widescreen will have maximum width of 1152px.
The widescreen will have maximum width of 1152px.
The fullhd will have maximum width of 1344px.
The fullhd will have maximum width of 1344px.
Let's create a simple example of container class −
Note − Resize the coding-ground output window to see the changes occurring according to window size.
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Container Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Container
            </span>
            <br>
            <br>
            
            <div class = "container">
               <div class = "notification has-background-grey-lighter">
                  This container works on desktop.
               </div>
            </div>
            <br>
            
            <div class = "container is-fluid">
               <div class = "notification has-background-grey-lighter">
                  This is <strong>fluid</strong> container, which has 32px gap on either side, on any viewport size.
               </div>
            </div>
            <br>
            
            <div class = "container is-widescreen">
               <div class = "notification has-background-grey-lighter">
                  This is <strong>fullwidth</strong> container, works until <i>$widescreen</i> breakpoint.
               </div>
            </div>
            <br>
            
            <div class = "container is-fullhd">
               <div class = "notification has-background-grey-lighter">
                  This is <strong>fullwidth</strong> container, works until <i>$fullhd</i> breakpoint.
               </div>
            </div>
         </div>
      </section>
      
   </body>
</html>
It displays the below output −
The Bulma includes horizontal level to specify the level for left side and right side. The level-left class specifies element at left side and level-right class specifies element at right side. You can define the each individual element by using level-item class.
Level contains two types of levels.
Centered Level − You can make the items center in the level container.
Centered Level − You can make the items center in the level container.
Mobile Level − If you want to display the items horizontally on mobile, then use is-mobile modifier in the level container.
Mobile Level − If you want to display the items horizontally on mobile, then use is-mobile modifier in the level container.
Let's create a simple example for level by using the above level types as shown below −
Note − Resize the coding-ground output window to see the changes occurring according to window size.
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Container Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Level
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">Level structure</span>
            <nav class = "level has-background-grey-lighter">
               <div class = "level-left has-background-warning">
                  <p class = "level-item"><a>Menu 1</a></p>
                  <p class = "level-item"><a>Menu 2</a></p>
                  <p class = "level-item"><a>Menu 3</a></p>
               </div>
               <div class = "level-right has-background-warning">
                  <p class = "level-item"><a>Menu 1</a></p>
                  <p class = "level-item"><a>Menu 2</a></p>
                  <p class = "level-item"><a>Menu 3</a></p>
               </div>
            </nav>
            
            <span class = "is-size-5">Centered Level</span>
            <nav class = "level has-background-grey-lighter">
               <div class = "level-item has-text-centered">
                  <p>Item-1</p>
               </div>
               <div class = "level-item has-text-centered">
                  <p>Item-2</p>
               </div>
               <div class = "level-item has-text-centered">
                  <p>Item-3</p>
               </div>
               <div class = "level-item has-text-centered">
                  <p>Item-4</p>
               </div>
            </nav>
            
            <span class = "is-size-5">Mobile Level</span>
            <nav class = "level has-background-grey-lighter is-mobile">
               <div class = "level-item has-text-centered">
                  <p>Item-1</p>
               </div>
               <div class = "level-item has-text-centered">
                  <p>Item-2</p>
               </div>
               <div class = "level-item has-text-centered">
                  <p>Item-3</p>
               </div>
               <div class = "level-item has-text-centered">
                  <p>Item-4</p>
               </div>
            </nav>
         </div>
      </section>
      
   </body>
</html>
It displays the below output −
Menu 1
Menu 2
Menu 3
Menu 1
Menu 2
Menu 3
Item-1
Item-2
Item-3
Item-4
Item-1
Item-2
Item-3
Item-4
 Print
 Add Notes
 Bookmark this page