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. In this article, we will learn how we can make a website responsive using show property.
Bulma Show is a responsive property that is offered by the Bulma framework. When you change the resolution of the screen then the content will flex and try to fit into the website to look good otherwise it will hide and show accordingly.
Bulma Show Classes:
- is-block: This class is used to display elements in the block.
- is-flex: This class is used to display elements in flex.
- is-inline: This class is used to display elements in-line.
- is-inline-block: This class is used to display elements inline-block.
- is-inline-flex: This class is used to display elements inline-flex.
Class | Mobile Up to 768px |
Tablet Between 769px and 1023px |
Desktop Between 1024px and 1215px |
Widescreen Between 1216px and 1407px |
FullHD 1408px and above |
---|---|---|---|---|---|
Flex | Unchanged | Unchanged | Unchanged | Unchanged | |
is-flex-tablet-only | Unchanged | Flex | Unchanged | Unchanged | Unchanged |
is-flex-desktop-only | Unchanged | Unchanged | Flex | Unchanged | Unchanged |
is-flex-widescreen-only | Unchanged | Unchanged | Unchanged | Flex | Unchanged |
Classes to display up to or from a specific breakpoint:
Class | Mobile Up to 768px |
Tablet Between 769px and 1023px |
Desktop Between 1024px and 1215px |
Widescreen Between 1216px and 1407px |
FullHD 1408px and above |
---|---|---|---|---|---|
is-flex-touch | Flex | Flex | Unchanged | Unchanged | Unchanged |
is-flex-tablet | Unchanged | Flex | Flex | Flex | Flex |
is-flex-desktop | Unchanged | Unchanged | Flex | Flex | Flex |
is-flex-widescreen | Unchanged | Unchanged | Unchanged | Flex | Flex |
is-flex-fullhd | Unchanged | Unchanged | Unchanged | Flex | Flex |
Syntax:
<element-name class="class-name"> ... </element-name>
Example 1: In the below code we will see the responsive behavior.
<!DOCTYPE html> < html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
</ head >
< body >
< h2 class = "has-text-centered has-text-success" >
GeeksforGeeks
</ h2 >
< h3 class = "has-text-centered " >
A computer science portal for geeks
</ h3 >< br >
< div class = "columns is-flex-tablet-only " >
< div class="column has-background-success
has-text-black has-text-centered" id = "gfg" >
GFG
</ div >< br >
< div class="column has-background-success
has-text-black has-text-centered" id = "gfg" >
GFG
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In the below code we will see the responsive behavior.
<!DOCTYPE html> < html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
</ head >
< body >
< h2 class = "has-text-centered has-text-success" >
GeeksforGeeks
</ h2 >
< h3 class = "has-text-centered " >
A computer science portal for geeks
</ h3 >< br >
< div class = "columns is-flex-tablet-only " >
< div class="column has-background-success
has-text-black has-text-centered" id = "gfg" >
1
</ div >< br >
< div class="column has-background-success
has-text-black has-text-centered" id = "gfg" >
2
</ div >< br >
< div class="column has-background-success
has-text-black has-text-centered" id = "gfg" >
3
</ div >< br >
< div class="column has-background-success
has-text-black has-text-centered" id = "gfg" >
4
</ div >< br >
< div class="column has-background-success
has-text-black has-text-centered" id = "gfg" >
5
</ div >< br >
< div class="column has-background-success
has-text-black has-text-centered" id = "gfg" >
6
</ div >< br >
< div class="column has-background-success
has-text-black has-text-centered" id = "gfg" >
7
</ div >< br >
< div class="column has-background-success
has-text-black has-text-centered" id = "gfg" >
8
</ div >< br >
< div class="column has-background-success
has-text-black has-text-centered" id = "gfg" >
9
</ div >< br >
</ div >
</ body >
</ html >
|
Output:
Reference: https://bulma.io/documentation/helpers/visibility-helpers/