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

Output:

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

Bulma Desktop and Widescreen maximum widths

Explore