Bulma Container Widescreen or FullHD only

Last Updated : 16 Feb, 2022

Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.

With the help of widescreen or fullhd container classes, we can have the full width until there would be any breakpoints. When we want that in widescreens, the content should be in full width then we can use these container class modifiers to do so.

Container class modifiers:

is-widescreen: This is the class to make the container full width until the widescreen breakpoint (Widescreen breakpoint: 1216px)
is-fullhd: This is the class to make the container full width until the FullHD breakpoint (FullHD breakpoint: 1408px)

Syntax:

<div class="container is-widescreen">
      <!-- Items -->
</div>

Example 1: The following code demonstrates the is-widescreen modifier.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma container widescreen</title> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body> 
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> 
    <b class="is-size-4">Bulma container widescreen</b> 
    <div class="container is-widescreen"> 
        <div class="" style="background-color:green;height:200px;" > 
           
          <h3 style="color:white; size:30;">GeeksforGeeks1</h3> 
          <h3 style="color:white; size:30;">GeeksforGeeks2</h3> 
          <h3 style="color:white; size:30;">GeeksforGeeks3</h3> 
        </div> 
    </div> 
</body> 
</html> 

Output:

Example 2: The following code demonstrates the is-fullhd modifier.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma container fullhd</title> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body> 
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> 
    <b class="is-size-4">Bulma container fullhd</b> 
    <div class="container is-fullhd"> 
        <div class="" style="background-color:green;height:200px;">          
          <h3 style="color:white; size:30;">GeeksforGeeks1</h3> 
          <h3 style="color:white; size:30;">GeeksforGeeks2</h3> 
          <h3 style="color:white; size:30;">GeeksforGeeks3</h3> 
        </div> 
    </div> 
</body> 
  
</html> 