Bulma uses Sass mixins to create the CSS output and they are mainly used within the context of the Bulma framework.
In this article, we will know about Bulma Responsive. Bulma is a component-rich, mobile-first CSS framework based on flexbox. Since Bulma is a mobile-first framework, it supports the following responsiveness features:
- Vertical by default: The Bulma columns are stacked vertically on top of each other, the children of the level component are also shown vertically on mobile devices and the navigation menu is also hidden on mobile devices by default.
- Breakpoints: Bulma supports 5 Breakpoints and these breakpoints are used by Bulma Responsive Mixins.
- Disabling breakpoints: Bulma supports a few auto-enabled breakpoints. The $widescreen and $fullhd breakpoints are the auto-enabled Bulma Responsive Breakpoints.
- Variables: These variables are used to change the content of the page according to the resolution of the page.
For using mixins, there is no specific predefined class given by Bulma rather we create our own classes and style them using SASS mixins.
Syntax:
.bulma-[Mixin Name]-mixin{
@include [Mixin Name];
}Parameters: Above mixins do not accept any parameters.
Note: You must know the implementation of SASS mixins for the below examples. Please see the pre-requisite given on the link and then implement the below code.
Example 1: Below example illustrates Bulma Responsiveness.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body class="content container has-text-centered">
<div>
<p class="title is-1 text-success">
GeekforGeeks
</p>
<p class="subtitle is-3">
Bulma Responsiveness
</p>
</div>
<p></p>
<div>
<p class="bulma-responsive">
GeeksforGeeks: <br>
A computer science portal
</p>
</div>
</body>
</html>
|
SCSS file:
CSS
$gap: 32px;
$tablet: 769px;
$desktop: 960px + (2 * $gap);
$widescreen: 1152px + (2 * $gap);
$fullhd: 1344px + (2 * $gap);
$widescreen-enabled: true; $fullhd-enabled: true; @mixin mobile { @media screen and (max-width: $tablet - 1px) {
@content
}
} @mixin tablet { @media screen and (min-width: $tablet), print {
@content
}
} @mixin desktop { @media screen and (min-width: $desktop) {
@content
}
} @mixin widescreen { @if $widescreen-enabled {
@media screen and (min-width: $widescreen) {
@content
}
}
} @mixin fullhd { @if $fullhd-enabled {
@media screen and (min-width: $fullhd) {
@content
}
}
} .text-success { color:darkgreen;
} .bulma-responsive { color:white;
@include mobile
{
background:lightgreen;
}
@include tablet
{
background:green;
}
@include desktop {
background:darkgreen;
}
@include widescreen {
background:lightseagreen;
}
@include fullhd {
background:darkolivegreen;
}
} |
CSS code:
CSS
.text-success { color:darkgreen;
} .bulma-responsive { color:white;
} @media screen and (max-width: 768px) {
.bulma-responsive
{
background:lightgreen;
}
} @media screen and (min-width: 769px), print {
.bulma-responsive
{
background:green;
}
} @media screen and (min-width: 1024px) {
.bulma-responsive
{
background:darkgreen;
}
} @media screen and (min-width: 1216px) {
.bulma-responsive
{
background:lightseagreen;
}
} @media screen and (min-width: 1408px) {
.bulma-responsive
{
background:darkolivegreen;
}
} |
Output:
Example 2: Below example illustrates another example of Bulma Responsiveness.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body class="content container has-text-centered">
<div>
<p class="title is-1 text-success">
GeekforGeeks
</p>
<p class="subtitle is-3">
Bulma Responsiveness
</p>
</div>
<p></p>
<div>
<p class="bulma-responsive">
GeeksforGeeks: <br>
A computer science portal
</p>
</div>
</body>
</html>
|
SCSS file:
CSS
$gap: 32px;
$mobile: 400px;
$tablet: 550px;
$desktop: 700px;
$widescreen: 850px;
$fullhd: 1000px;
$widescreen - enabled: true; $fullhd - enabled: true; @mixin mobile { @media screen and(max - width: $tablet - 1px) {
@content
}
} @mixin tablet { @media screen and(min - width: $tablet), print {
@content
}
} @mixin desktop { @media screen and(min - width: $desktop) {
@content
}
} @mixin widescreen { @if $widescreen - enabled {
@media screen and(min - width: $widescreen) {
@content
}
}
} @mixin fullhd { @if $fullhd - enabled {
@media screen and(min - width: $fullhd) {
@content
}
}
} .text - success { color: darkgreen;
} .bulma - responsive { color: white;
@include mobile {
background: lightgreen;
}
@include tablet {
background: green;
}
@include desktop {
background: darkgreen;
}
@include widescreen {
background: lightseagreen;
}
@include fullhd {
background: darkolivegreen;
}
} |
CSS code:
CSS
.text-success { color:darkgreen;
} .bulma-responsive { color:white;
} @media screen and (max-width: 549px)
{ .bulma-responsive
{
background:lightgreen;
}
} @media screen and (min-width: 550px), print { .bulma-responsive
{
background:green;
}
} @media screen and (min-width: 700px)
{ .bulma-responsive
{
background:darkgreen;
}
} @media screen and (min-width: 850px)
{ .bulma-responsive
{
background:lightseagreen;
}
} @media screen and (min-width: 1000px)
{ .bulma-responsive
{
background:darkolivegreen;
}
} |
Output:
Reference: https://versions.bulma.io/0.7.5/documentation/overview/responsiveness/