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 =
< script src =
</ 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 =
< script src =
</ 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 =
alt = "" />
</ div >
</ div >< br />
< div class = "container is-max-widescreen" >
< div class = "notification has-background-light" >
< img src =
alt = "" />
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://bulma.io/documentation/layout/container/#desktop-and-widescreen-maximum-widths
Share your thoughts in the comments
Please Login to comment...