Bulma Desktop and Widescreen maximum widths

Last Updated : 21 Mar, 2022

In this article, we’ll see the Bulma Desktop and Widescreen maximum widths. Sometimes, the user wants to provide a narrow container on larger viewports and for that the Bulma framework provides two modifier classes i.e, is-max-desktop and is-max-widescreen. Below we have discussed both these modifiers with each of their examples.

Bulma Desktop and Widescreen maximum widths classes:

is-max-desktop: This class is used to provide the narrow container like a desktop container size.
is-max-widescreen: This class is used to provide the narrow container like a widescreen container size.

Syntax:

<div class="container is-max-desktop ">
    ...
</div>

<div class="container is-max-widescreen">
    ...
</div>

Example 1: Below example illustrates the Bulma desktop and Widescreen maximum widths on Container.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
  <title>GFG</title> 
  <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/> 
  <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
  </script> 
</head> 
  
<body> 
  <div class="content container has-text-centered"> 
    <h1 class="title has-text-success"> 
      GeekforGeeks 
    </h1> 
  
    <h1 class="subtitle"> 
      Bulma Desktop and Widescreen maximum widths 
    </h1> 
  
    <div class="container is-max-desktop"> 
      <div class="notification has-background-dark has-text-white"> 
        Container having max-width of $is-max-desktop on widescreen and 
        fullhd. 
      </div> 
    </div><br/> 
  
    <div class="container is-max-widescreen"> 
      <div class="notification has-background-dark has-text-white"> 
        Container having max-width of $is-max-widescreen on fullhd. 
      </div> 
    </div> 
  </div> 
</body> 
    
</html>

Output:

Example 2: Below example illustrates the Bulma desktop and Widescreen maximum widths on Images.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title>GFG</title> 
  <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/> 
  
  <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
  </script> 
</head> 
  
<body> 
  <div class="content container has-text-centered"> 
    <h1 class="title has-text-success"> 
      GeekforGeeks 
    </h1> 
  
    <h1 class="subtitle"> 
      Bulma Desktop and Widescreen maximum widths 
    </h1> 
  
    <div class="container is-max-desktop"> 
      <div class="notification has-background-light"> 
        <img src= 
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png"
          alt=""/> 
      </div> 
    </div><br/> 
  
    <div class="container is-max-widescreen"> 
      <div class="notification has-background-light"> 
        <img src= 
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png"
          alt=""/> 
      </div> 
    </div> 
  </div> 
</body> 
  
</html>