Bulma CSS framework: This tutorial includes an introduction to Bulma – a free and open-source CSS framework used to build responsive web pages:
In this tutorial, we’ve covered what Bulma is, the advantages of Bulma, a comparison between Bulma and Bootstrap, how to include Bulma into your project, responsiveness, and several Bulma helpers.
Audience and Prerequisites:
This tutorial series is designed for a learner who wants to learn Bulma from the beginning.
CSS knowledge is not required to learn Bulma, but it is advantageous to have basic knowledge of HTML, CSS, and JavaScript for a better understanding.
We have divided the tutorial series into four tutorials. Each tutorial covers targeted topics with several illustrative examples.
Let’s begin by understanding what Bulma CSS Framework is!
List of Tutorials in This Bulma Series
Tutorial #1 – Introduction, Overview, Mixins, and Helpers
Tutorial #2 – Columns, Layout, and Forms
Tutorial #3 – Elements and Components
Tutorial #4 – Interview Questions
Table of Contents:
Introduction to Bulma CSS Framework
What is Bulma
Bulma is a free, open-source, modern CSS framework that can be used to build responsive web pages. It is considered one of the best CSS Frameworks for frontend development. Bulma is based on Flexbox.
The creator of Bulma is Jeremy Thomas. Currently, versions older than 0.4.4 are not accessible, but later versions are available. Further, the Bulma source code is licensed under the MIT license.
Advantages of Bulma
There are several advantages of using Bulma as the front-end framework.
Some advantages are listed below:
- Free and open source
- Lightweight
- Platform independent
- Compatible with most modern browsers
- Provides several ready-to-use components
- A mobile-first framework
- Easy to learn and use
- Good documentation support
- Customizable
- JavaScript is not required to install
- Provides a lot of useful helpers
- Supports Font Awesome 4 and Font Awesome 5
Bulma vs Bootstrap
Bootstrap is the most popular CSS framework. Let’s see a brief comparison between Bulma and Bootstrap.
| Feature | Bulma | Bootstrap | |
|---|---|---|---|
| 1 | Type of framework | Front-end framework | Front-end framework |
| 2 | Availability | Free and open source | Free and open source |
| 3 | Popularity | Popular, but not popular as Bootstrap | Most popular CSS framework |
| 4 | Based on | Based on flexbox | Based on flexbox |
| 5 | Responsiveness | Highly responsive | Highly responsive |
| 6 | JavaScript elements | No JavaScript elements | Has JavaScript elements |
| 7 | Additional elements | No elements like list group, wells, or page header | Has elements like list group, wells, or page header |
| 8 | Internet Explorer compatibility | Compatible with Internet Explorer 11 (about 90% compatibility) | Compatible with Internet Explorer 10-11 |
| 9 | Font Awesome compatibility | Compatible with Font Awesome | Compatible with Font Awesome |
| 10 | Accessibility | Limited support for accessibility | More support for accessibility |
| 11 | Community support | Smaller community than Bootstrap | Larger community |
| 12 | Availability of themes and plugins | Less availability of themes and plugins than Bootstrap | High availability of themes and plugins |
Suggested Reading =>> Exclusive Bootstrap Tutorial
Useful Resources
The list below shows some of the useful resources to get in touch with Bulma:
Overview
Getting Started with Bulma
There are four options to include Bulma in your project. They are,
- Option 1 (Recommended): Use a CDN
- Option 2 (Recommended): Install the NPM package
- Option 3: Download the Github release
- Option 4: Clone the GitHub repository
Let’s look at each option in detail.
#1) Use a CDN
You can directly import the CSS file using the following code block. You need to add the Bulma CDN inside the <head> element.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
Let’s see an example:
<!DOCTYPE html> <html> <head> <title>My Title</title> <!--Bulma CDN--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <h1 class="title">Welcome to Software Testing Help!!!</</h1> </div> </body> </html>
The below screenshot shows the browser output of the above code.
#2) Install the NPM Package
Run the following command on your terminal to install the Bulma NPM Package.
npm install Bulma
#3) Download the Github Release
You can visit this link to download the Github release of Bulma.
#4) Clone the GitHub Repository
You can clone the Bulma GitHub repository instead of downloading it. However, this repository also includes the official documentation of Bulma.
Run the following command on your terminal to clone the Bulma GitHub repository.
git clone https://github.com/jgthms/bulma.git
Responsiveness
Bulma is highly responsive as it is a mobile-first framework.
On mobile,
- Columns are arranged vertically.
- Children of the level component are arranged vertically.
- Nav menu is hidden.
There are 5 breakpoints in Bulma:
- Mobile: Up to 768px
- Tablet: Between 769px and 1023px
- Desktop: Between 1024px and 1215px
- Widescreen: Between 1216px and 1407px
- FullHD: 1408px and upwards
There are 9 responsive mixins or 11 named mixins in Bulma.
The 9 responsive mixins (also named mixins) are:
- mobile: Styles applied until the tablet
- tablet: Styles applied from the tablet
- tablet-only: Styles applied from tablet and until desktop
- touch: Styles applied until the desktop
- desktop: Styles applied from desktop
- desktop-only: Styles applied from desktop and until widescreen
- widescreen: Styles applied from widescreen
- widescreen-only: Styles applied from widescreen and until fullhd
- fullhd: Styles applied from fullhd
The other 2 named mixins are:
- until-widescreen: Styles applied until widescreen
- until-fullhd: Styles applied until fullhd
You can disable the widescreen and fullhd breakpoints as follows:
widescreen-enabled: false fullhd-enabled: false
Colors
There are different color variations for elements and components, as shown in the below table. The syntax is is-$color, like is-primary, is-white, etc.
| Colour | Variable | Value | Computed value | Invert value | Computed invert value | |
|---|---|---|---|---|---|---|
| 1 | White | $white | $white | hsl (0, 0%, 100%) | $black | hsl (0, 0%, 4%) |
| 2 | Black | $black | $black | hsl (0, 0%, 4%) | $white | hsl (0, 0%, 100%) |
| 3 | Light | $light | $white-ter | hsl (0, 0%, 96%) | $grey-darker | hsl (0, 0%, 21%) |
| 4 | Dark | $dark | $grey-darker | hsl (0, 0%, 21%) | $white-ter | hsl (0, 0%, 96%) |
| 5 | Primary | $primary | $turquoise | hsl (171, 100%, 41%) | #fff | #fff |
| 6 | Link | $link | $blue | hsl (217, 71%, 53%) | #fff | #fff |
| 7 | Info | $info | $cyan | hsl (204, 86%, 53%) | #fff | #fff |
| 8 | Success | $success | $green | hsl (141, 53%, 53%) | #fff | #fff |
| 9 | Warning | $warning | $yellow | hsl (48, 100%, 67%) | rgba (0, 0, 0, 0.7) | rgba (0, 0, 0, 0.7) |
| 10 | Danger | $danger | $red | hsl (348, 100%, 61%) | #fff | #fff |
There are different shades of grey for elements and components.
They are shown in the table below:
| Colour | Variable | Value | |
|---|---|---|---|
| 1 | Black bis | $black-bis | hsl (0, 0%, 7%) |
| 2 | Black ter | $black-ter | hsl (0, 0%, 14%) |
| 3 | Grey darker | $grey-darker | hsl (0, 0%, 21%) |
| 4 | Grey dark | $grey-dark | hsl (0, 0%, 29%) |
| 5 | Grey light | $grey-light | hsl (0, 0%, 71%) |
| 6 | Grey lighter | $grey-lighter | hsl (0, 0%, 86%) |
| 7 | White ter | $white-ter | hsl (0, 0%, 96%) |
| 8 | White bis | $white-bis | hsl (0, 0%, 98%) |
Bulma Helpers
Colors
Text Colors
There are 10 colors and 9 shades of grey for text. They are shown in the below table:
| Class | Colour | Value | |
|---|---|---|---|
| 1 | has-text-white | White | hsl (0, 0%, 100%) |
| 2 | has-text-black | Black | hsl (0, 0%, 4%) |
| 3 | has-text-light | Light | hsl (0, 0%, 96%) |
| 4 | has-text-dark | Dark | hsl (0, 0%, 21%) |
| 5 | has-text-primary | Primary | hsl (171, 100%, 41%) |
| 6 | has-text-link | Link | hsl (217, 71%, 53%) |
| 7 | has-text-info | Info | hsl (204, 86%, 53%) |
| 8 | has-text-success | Success | hsl (141, 71%, 48%) |
| 9 | has-text-warning | Warning | hsl (48, 100%, 67%) |
| 10 | has-text-danger | Danger | hsl (348, 100%, 61%) |
| 11 | has-text-black-bis | Black bis | hsl (0, 0%, 7%) |
| 12 | has-text-black-ter | Black ter | hsl (0, 0%, 14%) |
| 13 | has-text-grey-darker | Grey darker | hsl (0, 0%, 21%) |
| 14 | has-text-grey-dark | Grey dark | hsl (0, 0%, 29%) |
| 15 | has-text-grey | Grey | hsl (0, 0%, 48%) |
| 16 | has-text-grey-light | Grey light | hsl (0, 0%, 71%) |
| 17 | has-text-grey-lighter | Grey lighter | hsl (0, 0%, 86%) |
| 18 | has-text-white-ter | White ter | hsl (0, 0%, 96%) |
| 19 | has-text-white-bis | White bis | hsl (0, 0%, 98%) |
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <p class="has-text-white has-background-black">White text</p> <p class="has-text-black">Black text</p> <p class="has-text-light">Light text</p> <p class="has-text-dark">Dark text</p> <p class="has-text-primary">Primary text</p> <p class="has-text-link">Link text</p> <p class="has-text-info">Info text</p> <p class="has-text-success">Success text</p> <p class="has-text-warning">Warning text</p> <p class="has-text-danger">Danger text</p> <p class="has-text-black-bis">Black bis text</p> <p class="has-text-black-ter">Black ter text</p> <p class="has-text-grey-darker">Grey darker text</p> <p class="has-text-grey-dark">Grey dark text</p> <p class="has-text-grey">Grey text</p> <p class="has-text-grey-light">Grey light text</p> <p class="has-text-grey-lighter">Grey lighter text</p> <p class="has-text-white-ter">White ter text</p> <p class="has-text-white-bis">White bis text</p> </div> </body> </html>
The below screenshot shows the browser output of the above code.
Background Colors
There are 10 colors and 9 shades of grey for the element background.
They are shown in the table below:
| Class | Colour | Value | |
|---|---|---|---|
| 1 | has-background-white | White | hsl (0, 0%, 100%) |
| 2 | has-background-black | Black | hsl (0, 0%, 4%) |
| 3 | has-background-light | Light | hsl (0, 0%, 96%) |
| 4 | has-background-dark | Dark | hsl (0, 0%, 21%) |
| 5 | has-background-primary | Primary | hsl (171, 100%, 41%) |
| 6 | has-background-link | Link | hsl (217, 71%, 53%) |
| 7 | has-background-info | Info | hsl (204, 86%, 53%) |
| 8 | has-background-success | Success | hsl (141, 71%, 48%) |
| 9 | has-background-warning | Warning | hsl (48, 100%, 67%) |
| 10 | has-background-danger | Danger | hsl (348, 100%, 61%) |
| 11 | has-background-black-bis | Black bis | hsl (0, 0%, 7%) |
| 12 | has-background-black-ter | Black ter | hsl (0, 0%, 14%) |
| 13 | has-background-grey-darker | Grey darker | hsl (0, 0%, 21%) |
| 14 | has-background-grey-dark | Grey dark | hsl (0, 0%, 29%) |
| 15 | has-background-grey | Grey | hsl (0, 0%, 48%) |
| 16 | has-background-grey-light | Grey light | hsl (0, 0%, 71%) |
| 17 | has-background-grey-lighter | Grey lighter | hsl (0, 0%, 86%) |
| 18 | has-background-white-ter | White ter | hsl (0, 0%, 96%) |
| 19 | has-background-white-bis | White bis | hsl (0, 0%, 98%) |
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <p class="has-background-white">White background</p> <p class="has-background-black">Black background</p> <p class="has-background-light">Light background</p> <p class="has-background-dark">Dark background</p> <p class="has-background-primary">Primary background</p> <p class="has-background-link">Link background</p> <p class="has-background-info">Info background</p> <p class="has-background-success">Success background</p> <p class="has-background-warning">Warning background</p> <p class="has-background-danger">Danger background</p> <p class="has-background-black-bis">Black bis background</p> <p class="has-background-black-ter">Black ter background</p> <p class="has-background-grey-darker">Grey darker background</p> <p class="has-background-grey-dark has-text-white">Grey dark background</p> <p class="has-background-grey">Grey background</p> <p class="has-background-grey-light">Grey light background</p> <p class="has-background-grey-lighter">Grey lighter background</p> <p class="has-background-white-ter">White ter background</p> <p class="has-background-white-bis">White bis background</p> </div> </body> </html>
The below screenshot shows the browser output of the above code.
Spacing
Bulma has margin (m*) and padding (p*) classes that can be used in all directions.
They are:
- *t for top
- *b for bottom
- *l for left
- *r for right
- *x for horizontal (both left and right)
- *y for vertical (both top and bottom)
For Example:
mt-* for margin-top
pr-* for padding-right
mx* for margin-left and margin-right
py* for padding-top and padding-bottom
There are 8 value suffixes for each direction:
- *-0 (0)
- *-1 (0.25rem)
- *-2 (0.5rem)
- *-3 (0.75rem)
- *-4 (1rem)
- *-5 (1.5rem)
- *-6 (3rem)
- *-auto (auto)
The table below shows all 112 spacing classes:
| *-0 | *-1 | *-2 | *-3 | *-4 | *-5 | *-6 | auto | ||
|---|---|---|---|---|---|---|---|---|---|
| 1 | m | m-0 | m-1 | m-2 | m-3 | m-4 | m-5 | m-6 | m-auto |
| 2 | mt | mt-0 | mt-1 | mt-2 | mt-3 | mt-4 | mt-5 | mt-6 | mt-auto |
| 3 | mr | mr-0 | mr-1 | mr-2 | mr-3 | mr-4 | mr-5 | mr-6 | mr-auto |
| 4 | mb | mb-0 | mb-1 | mb-2 | mb-3 | mb-4 | mb-5 | mb-6 | mb-auto |
| 5 | ml | ml-0 | ml-1 | ml-2 | ml-3 | ml-4 | ml-5 | ml-6 | ml-auto |
| 6 | mx | mx-0 | mx-1 | mx-2 | mx-3 | mx-4 | mx-5 | mx-6 | mx-auto |
| 7 | my | my-0 | my-1 | my-2 | my-3 | my-4 | my-5 | my-6 | my-auto |
| 8 | p | p-0 | p-1 | p-2 | p-3 | p-4 | p-5 | p-6 | p-auto |
| 9 | pt | pt-0 | pt-1 | pt-2 | pt-3 | pt-4 | pt-5 | pt-6 | pt-auto |
| 10 | pr | pr-0 | pr-1 | pr-2 | pr-3 | pr-4 | pr-5 | pr-6 | pr-auto |
| 11 | pb | pb-0 | pb-1 | pb-2 | pb-3 | pb-4 | pb-5 | pb-6 | pb-auto |
| 12 | pl | pl-0 | pl-1 | pl-2 | pl-3 | pl-4 | pl-5 | pl-6 | pl-auto |
| 13 | px | px-0 | px-1 | px-2 | px-3 | px-4 | px-5 | px-6 | px-auto |
| 14 | py | py-0 | py-1 | py-2 | py-3 | py-4 | py-5 | py-6 | py-auto |
Let’s see an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<p class="mt-6">
Margin top-6
</p>
<p class="px-2">
Horizontal padding-2
</p>
<p class="mt-4 px-4">
Margin top-4 and horizontal padding-4
</p>
</body>
</html>
The below screenshot shows the browser output of the above code:
Typography
Size
There are 7 classes to change the font size as listed below:
- is-size-1: The font size is set to 3rem
- is-size-2: The font size is set to 2.5rem
- is-size-3: The font size is set to 2rem
- is-size-4: The font size is set to 1.5rem
- is-size-5: The font size is set to 1.25rem
- is-size-6: The font size is set to 1rem
- is-size-7: The font size is set to 0.75rem
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <p class="is-size-1">Size 1</p> <p class="is-size-2">Size 2</p> <p class="is-size-3">Size 3</p> <p class="is-size-4">Size 4</p> <p class="is-size-5">Size 5</p> <p class="is-size-6">Size 6</p> <p class="is-size-7">Size 7</p> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Responsive Size
You can use the below size classes for different viewport widths:
| Class | Mobile (Up to 768px) | Tablet (769px - 1023px) | Desktop (1024px - 1215px) | Widescreen (1216px - 1407px) | FullHD (1408px and upwards) |
|
|---|---|---|---|---|---|---|
| 1 | is-size-1-mobile | 3rem | no change | no change | no change | no change |
| 2 | is-size-1-touch | 3rem | 3rem | no change | no change | no change |
| 3 | is-size-1-tablet | no change | 3rem | 3rem | 3rem | 3rem |
| 4 | is-size-1-desktop | no change | no change | 3rem | 3rem | 3rem |
| 5 | is-size-1-widescreen | no change | no change | no change | 3rem | 3rem |
| 6 | is-size-1-fullhd | no change | no change | no change | no change | 3rem |
This logic is applicable for all 7 sizes.
Alignment
There are 4 classes to change the text alignment as listed below:
- has-text-centered: Center the text
- has-text-justified: Justify the text
- has-text-left: Align the text to the left side
- has-text-right: Align the text to the right side
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <p class="has-text-primary">Text centered</p> <p class="has-text-centered">...</p> <br> <p class="has-text-primary">Text justified</p> <p class="has-text-justified">...</p> <br> <p class="has-text-primary">Text left</p> <p class="has-text-left">...</p> <br> <p class="has-text-primary">Text right</p> <p class="has-text-right">...</p> </div> </body> </html>
The below screenshot shows the browser output of the above code.
Responsive Alignment
You can use the below alignment classes for different viewport widths:
| Class | Mobile (Up to 768px) | Tablet (769px - 1023px) | Desktop (1024px - 1215px) | Widescreen (1216px - 1407px) | FullHD (1408px and upwards) |
|
|---|---|---|---|---|---|---|
| 1 | has-text-left-mobile | left-aligned | no change | no change | no change | no change |
| 2 | has-text-left-touch | left-aligned | left-aligned | no change | no change | no change |
| 3 | has-text-left-tablet-only | no change | left-aligned | no change | no change | no change |
| 4 | has-text-left-tablet | no change | left-aligned | left-aligned | left-aligned | left-aligned |
| 5 | has-text-left-desktop-only | no change | no change | left-aligned | no change | no change |
| 6 | has-text-left-desktop | no change | no change | left-aligned | left-aligned | left-aligned |
| 7 | has-text-left-widescreen-only | no change | no change | no change | left-aligned | no change |
| 8 | has-text-left-widescreen | no change | no change | no change | left-aligned | left-aligned |
| 9 | has-text-left-fullhd | no change | no change | no change | no change | left-aligned |
This logic is applicable for all 4 alignments.
Text Transformation
There are 5 classes to change the text transformation as listed below:
- is-capitalized: Display the first character of each word in uppercase
- is-lowercase: Display all characters in lowercase
- is-uppercase: Display all characters in uppercase
- is-italic: Display all characters in italic
- is-underlined: Underline the text
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <p class="is-capitalized">Capitalized text</p> <p class="is-lowercase">Lowercase text</p> <p class="is-uppercase">Uppercase text</p> <p class="is-italic">Italic text</p> <p class="is-underlined">Underlined text</p> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Text Weight
There are 5 classes to change the text weight as listed below:
- has-text-weight-light: The text weight is set to light
- has-text-weight-normal: The text weight is set to normal
- has-text-weight-medium: The text weight is set to medium
- has-text-weight-semibold: The text weight is set to semibold
- has-text-weight-bold: The text weight is set to bold
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <p class="has-text-weight-light">Light text</p> <p class="has-text-weight-normal">Normal text</p> <p class="has-text-weight-medium">Medium text</p> <p class="has-text-weight-semibold">Semibold text</p> <p class="has-text-weight-bold">Bold text</p> </div> </body> </html>
The below screenshot shows the browser output of the above code.
Font Family
There are 5 classes to change the font family as listed below:
- is-family-sans-serif: The font family is set to family-sans-serif
- is-family-monospace: The font family is set to family-monospace
- is-family-primary: The font family is set to family-primary
- is-family-secondary: The font family is set to family-secondary
- is-family-code: The font family is set to family-code
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <p class="is-family-sans-serif">Sans serif font family</p> <p class="is-family-monospace">Monospace font family</p> <p class="is-family-primary">Primary font family</p> <p class="is-family-secondary">Secondary font family</p> <p class="is-family-code">Code font family</p> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Visibility
Show
You can use the classes below to show the content.
- is-block
- is-flex
- is-inline
- is-inline-block
- is-inline-flex
| Class | Mobile (Up to 768px) | Tablet (769px - 1023px) | Desktop (1024px - 1215px) | Widescreen (1216px - 1407px) | FullHD (1408px and upwards) |
|
|---|---|---|---|---|---|---|
| 1 | is-flex-mobile | flex | no change | no change | no change | no change |
| 2 | is-flex-tablet-only | no change | flex | no change | no change | no change |
| 3 | is-flex-desktop-only | no change | no change | flex | no change | no change |
| 4 | is-flex-widescreen-only | no change | no change | no change | flex | no change |
| 5 | is-flex-touch | flex | flex | no change | no change | no change |
| 6 | is-flex-tablet | no change | flex | flex | flex | flex |
| 7 | is-flex-desktop | no change | no change | flex | flex | flex |
| 8 | is-flex-widescreen | no change | no change | no change | flex | flex |
| 9 | is-flex-fullhd | no change | no change | no change | no change | flex |
This logic is applicable to all display options.
Hide
You can use the below classes to hide the content.
- is-invisible: Hide the visibility
- is-hidden: Hide element visually and also not available for screen readers
- is-sr-only: Hide element visually but available for screen readers
| Class | Mobile (Up to 768px) | Tablet (769px - 1023px) | Desktop (1024px - 1215px) | Widescreen (1216px - 1407px) | FullHD (1408px and upwards) |
|
|---|---|---|---|---|---|---|
| 1 | is-hidden-mobile | hidden | visible | visible | visible | visible |
| 2 | is-hidden-tablet-only | visible | hidden | visible | visible | visible |
| 3 | is-hidden-desktop-only | visible | visible | hidden | visible | visible |
| 4 | is-hidden-widescreen-only | visible | visible | visible | hidden | visible |
| 5 | is-hidden-touch | hidden | hidden | visible | visible | visible |
| 6 | is-hidden-tablet | visible | hidden | hidden | hidden | hidden |
| 7 | is-hidden-desktop | visible | visible | hidden | hidden | hidden |
| 8 | is-hidden-widescreen | visible | visible | visible | hidden | hidden |
| 9 | is-hidden-fullhd | visible | visible | visible | visible | hidden |
Flexbox
There are several helpers available for flexbox properties. The is-flex class can be combined with all of the Flexbox CSS properties.
- Flex direction
The applicable classes for flex-direction are listed below:
- is-flex-direction-row
- is-flex-direction-row-reverse
- is-flex-direction-column
- is-flex-direction-column-reverse
- Flex wrap
The applicable classes for flex-wrap are listed below:
- is-flex-wrap-nowrap
- is-flex-wrap-wrap
- is-flex-wrap-wrap-reverse
- Justify content
The applicable classes for justify-content are listed below:
- is-justify-content-flex-start
- is-justify-content-flex-end
- is-justify-content-center
- is-justify-content-space-between
- is-justify-content-space-around
- is-justify-content-space-evenly
- is-justify-content-start
- is-justify-content-end
- is-justify-content-left
- is-justify-content-right
- Align content
The applicable classes for align-content are listed below:
- is-align-content-flex-start
- is-align-content-flex-end
- is-align-content-center
- is-align-content-space-between
- is-align-content-space-around
- is-align-content-space-evenly
- is-align-content-stretch
- is-align-content-start
- is-align-content-end
- is-align-content-baseline
- Align items
The applicable classes for align-items are listed below:
- is-align-items-stretch
- is-align-items-flex-start
- is-align-items-flex-end
- is-align-items-center
- is-align-items-baseline
- is-align-items-start
- is-align-items-end
- is-align-items-self-start
- is-align-items-self-end
- Align self
The applicable classes for align-self are listed below:
- is-align-self-auto
- is-align-self-flex-start
- is-align-self-flex-end
- is-align-self-center
- is-align-self-baseline
- is-align-self-stretch
- Flex grow
The applicable classes for flex-grow are listed below:
- is-flex-grow-0
- is-flex-grow-1
- is-flex-grow-2
- is-flex-grow-3
- is-flex-grow-4
- is-flex-grow-5
- Flex shrink
The applicable classes for flex-shrink are listed below:
- is-flex-shrink-0
- is-flex-shrink-1
- is-flex-shrink-2
- is-flex-shrink-3
- is-flex-shrink-4
- is-flex-shrink-5
More Helpers
Furthermore, you can use the following helper classes too:
- is-clearfix: Clear or fix its child elements
- is-pulled-left: Pull an element to the left side
- is-pulled-right: Pull an element to the right side
- is-overlay: Create an overlay effect
- is-clipped: Add overflow hidden
- is-radiusless: Remove the radius
- is-shadowless: Remove the shadow
- is-unselectable: Disable text selection
- is-clickable: Change the cursor on specific elements
- is-relative: Position the element relative to its normal position
Conclusion
Bulma is a popular, flexbox-based, mobile-first CSS framework. You can easily get started with Bulma, as it is free & open-source, and easy to learn & use.
There are four options to include Bulma in your project. Furthermore, there are over 100 helpers available for colors, spacing, typography, visibility, flexbox, etc.
Also Read =>> Top CSS Editor to edit the CSS code
Happy learning!
Was this helpful?
Recommended Reading
-
This Tutorial Explains Java Collections Framework (JCF) in details along with Collection Hierarchy, Various Interfaces and the Advantages of JCF: Hope these eloquent tutorials on this Java Series for beginners are really helpful in enriching your knowledge of Java. Our previous tutorial briefed more on the basic I/O operations in…
-
Review, compare, and select from the list of top JavaScript Frameworks and Libraries to develop your application with the best features: Like salt is an essential ingredient in food, JavaScript has become a crucial ingredient in the digital world. You may be wondering, how? Be it Facebook, Netflix, Uber, LinkedIn,…
-
In this tutorial, we have compiled the 25 best Java Testing Frameworks and Tools for the benefit of our readers. You will see an overview of component-wise automated testing tools for JAVA/J2EE applications. Most of the popular Java tools are open source and are largely derived from JUnit. Tools vary…
-
Review of the top Behavior Driven Development BDD Tools and frameworks: In this article, we are going to discuss Behavior-driven development and some of the related tools used in it. We will discuss some of the best tools present in the industry today on this topic. So, before going into…
-
This Selenium Tutorial on Assertions Explains What Are Assertions in Selenium And Different Types of Assertions And Assertion Methods Using Junit and TestNG Frameworks: Assertions are used for validating a test case and helps us understand if a test case has passed or failed. The assertion is considered to be…
-
How to work on Data Driven Framework in Selenium Using Apache POI? Data Driven Framework is one of the most popular Automation Testing Frameworks in the current market. Data Driven automated testing is a method in which the test data set is created in the excel sheet, and is then…
-
Flask and Django are Python-based web development frameworks. This tutorial compares Django vs Flask in detail. Flask vs Node is also covered briefly: It has always been a pervading dilemma when it comes to the question of selecting a Framework for your next project. Every few months, you see new…
-
This tutorial explains the Basics of the Robot Framework IDE - RIDE, how to create a Project, Test Suite, and Test case in RIDE & how to use Libraries: In the previous Robot Framework tutorial, we learned about its pros, cons, important features, and installation instructions in detail. Ride is…
