What is Bulma Desktop and Widescreen maximum widths?

In this article, we will learn Bulma Desktop and Widescreen maximum widths,This free Bulma tutorial for complete beginners will help you learn Bulma from scratch.

Bulma Desktop and Widescreen maximum widths️‍🔥

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"> 
      GeekforBeginner 
    </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"> 
      GeekforBeginner 
    </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/w3wiki.svg/2560px-w3wiki.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/w3wiki.svg/2560px-w3wiki.svg.png"
          alt=""/> 
      </div> 
    </div> 
  </div> 
</body> 
  
</html>

Output:

Reference: https://bulma.io/documentation/layout/container/#desktop-and-widescreen-maximum-widths