Open In App

Bulma Spacing Configuration

Last Updated : 27 Oct, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 see the Bulma Spacing Configuration. 

Bulma includes various responsive padding and margin classes for modification of the appearance of elements. Spacing utilities have no breakpoints symbols to apply to the breakpoints. 

Bulma also provides customization of these features. To customize CSS output user can modify the following SCSS variables.

  • spacing-shortcuts
  • $spacing-horizontal
  • $spacing-vertical
  • $spacing-values

Syntax:

$spacing-shortcuts: ("margin|padding": abbre);
$spacing-horizontal: abbre | null;
$spacing-vertical: abbre | null;
$spacing-values: ("small": pixel, "medium": pixel, "large": pixel);

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 the Bulma Spacing Configuration.

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 Spacing Configuration
        </p>
    </div>
    <p></p>
    <!-- Margin helpers -->
    <div class="container">
        <div class="container has-background-success">
            <button class="button is-danger mg-small">
                mg-small
            </button>
            <button class="button is-danger mg-medium">
                mg-medium
            </button>
            <button class="button is-danger mg-large">
                mg-large
            </button>
        </div>
        <div class="container has-background-success">
            <button class="button is-dark mgt-small">
                mgt-small
            </button>
            <button class="button is-dark mgt-medium">
                mgt-medium
            </button>
            <button class="button is-dark mgt-large">
                mgt-large
            </button>
        </div>
        <div class="container has-background-success">
            <button class="button is-light mgr-small">
                mgr-small
            </button>
            <button class="button is-light mgr-medium">
                mgr-medium
            </button>
            <button class="button is-light mgr-large">
                mgr-large
            </button>
        </div>
        <div class="container has-background-success">
            <button class="button is-warning mgb-small">
                mgb-small
            </button>
            <button class="button is-warning mgb-medium">
                mgb-medium
            </button>
            <button class="button is-warning mgb-large">
                mgb-large
            </button>
        </div>
    </div>
</body>
</html>


SCSS file:

CSS




$spacing-shortcuts: ("margin": "mg");
$spacing-horizontal: "h";
$spacing-vertical: null;
$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);
$spacing-directions: (
    "top": "t"
    "right": "r"
    "bottom": "b"
    "left": "l"
);
  
.text-success {
    color: darkgreen;
}
  
@each $property, $shortcut in $spacing-shortcuts {
    @each $name, $value in $spacing-values {
  
        // All directions
        .#{$shortcut}-#{$name} {
            #{$property}: $value;
        }
          
        // Cardinal directions
        @each $direction, $suffix in $spacing-directions {
            .#{$shortcut}#{$suffix}-#{$name} {
                #{$property}-#{$direction}: $value;
            }
        }
  
        // Horizontal axis
        @if $spacing-horizontal != null {
            .#{$shortcut}#{$spacing-horizontal}-#{$name} {
                #{$property}-left: $value;
                #{$property}-right: $value;
            }
        }
  
        // Vertical axis
        @if $spacing-vertical != null {
            .#{$shortcut}#{$spacing-vertical}-#{$name} {
                #{$property}-top: $value;
                #{$property}-bottom: $value;
            }
        }
    }
}


CSS code:

CSS




.text-success {
    color:darkgreen;
}
  
.bulma-from-mixin {
    background: red
}
@media screen and (min-width: 800px) {
    .bulma-from-mixin {
        background: green;
    
}


Output:

 

Example 2: Below example illustrates another example of the Bulma Spacing Configuration.

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 Spacing Configuration
        </p>
    </div>
    <p></p>
    <div class="container has-background-success">
        <div class="container is-4by3"
            <img src=
                alt="GFG_logo" 
                class="mg-small" /> 
        </div>
        <div class="container is-4by3"
            <img src=
                alt="GFG_logo" 
                class="mgt-small" /> 
        </div>
        <div class="container is-4by3"
            <img src=
                alt="GFG_logo" 
                class="mgr-small" /> 
        </div>
        <div class="container"
            <img src=
                 alt="GFG_logo"
                 class="mgb-small" /> 
        </div>
    </div>
</body>
</html>


SCSS file:

CSS




$spacing-shortcuts: ("margin": "mg");
$spacing-horizontal: "h";
$spacing-vertical: null;
$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);
$spacing-directions: (
    "top": "t"
    "right": "r"
    "bottom": "b"
    "left": "l"
);
  
.text-success {
    color: darkgreen;
}
  
@each $property, $shortcut in $spacing-shortcuts {
    @each $name, $value in $spacing-values {
  
        // All directions
        .#{$shortcut}-#{$name} {
          #{$property}: $value;
        }
          
        // Cardinal directions
        @each $direction, $suffix in $spacing-directions {
            .#{$shortcut}#{$suffix}-#{$name} {
                #{$property}-#{$direction}: $value;
            }
        }
  
        // Horizontal axis
        @if $spacing-horizontal != null {
            .#{$shortcut}#{$spacing-horizontal}-#{$name} 
            {
                #{$property}-left: $value;
                #{$property}-right: $value;
            }
        }
  
        // Vertical axis
        @if $spacing-vertical != null {
            .#{$shortcut}#{$spacing-vertical}-#{$name} {
                #{$property}-top: $value;
                #{$property}-bottom: $value;
            }
        }
    }
}


CSS code:

CSS




.text-success {
    color:darkgreen; 
}
.mg-small {
    margin:10px;
}
.mgt-small {
    margin-top:10px
}
.mgr-small {
    margin-right:10px;
}
.mgb-small {
    margin-bottom:10px
}
.mgl-small {
    margin-left:10px
}
.mgh-small {
    margin-left:10px;
    margin-right:10px;
}
.mg-medium {
    margin:30px;
}
.mgt-medium {
    margin-top:30px
}
.mgr-medium {
    margin-right:30px;
}
.mgb-medium {
    margin-bottom:30px;
}
.mgl-medium {
    margin-left:30px;
}
.mgh-medium {
    margin-left:30px;
    margin-right:30px
}
.mg-large {
    margin:60px
}
  
.mgt-large {
    margin-top:60px
}
  
.mgr-large {
    margin-right:60px
}
  
.mgb-large {
    margin-bottom: 60px; }
  
.mgl-large {
    margin-left:60px
}
  
.mgh-large {
    margin-left: 60px;
    margin-right: 60px;
}


Output:

 

Reference: https://bulma.io/documentation/helpers/spacing-helpers/#configuration



Similar Reads

How to Adjust Line Spacing & Letter Spacing in CSS ?
Line spacing and letter spacing are two significant factors in improving a website's readability. They can be utilized to make stunning and intuitive web pages. Below are the approaches to adjust line spacing and letter spacing in CSS: Table of Content Line-Height propertyLetter Spacing propertyLine-Height propertyLine spacing can be adjusted using
3 min read
Bulma Spacing
Bulma has many facilities of classes to easily style elements in HTML. It includes various responsive padding and margin classes for modification of the appearance of elements. Spacing utilities have no breakpoints symbols to apply to the breakpoints. Following syntax are used in the various classes for adding spacing. (property)(sides)-(size) for
2 min read
Bulma List of all spacing helpers
Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. list of spacing helper classes that can be utilized to modify the size and color of the text for one or multiple viewport widths, which in turn helps to al
4 min read
Primer CSS Spacing
Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approa
4 min read
Primer CSS Em-based Spacing
Primer CSS Spacing contains Em-based Spacing which is mainly used to provide the spacing between the components, having the values in em, for which the value combined with typography, line height, or the total height becomes sensible numbers. GitHub's body font size is 14px which is difficult to work with, so we sometimes can't achieve a whole numb
2 min read
CSS letter-spacing Property
The letter-spacing property in CSS is used to set the spacing behavior between text characters i.e increasing or decreasing the space between characters in a text. Syntax: letter-spacing: normal|length|initial|inherit;Property values: normal: The normal letter spacing for the current font i.e no extra space between characters. This is the default v
2 min read
CSS border-spacing Property
The border-spacing Property is used to set the distance between the borders of neighboring cells in the Table. This property works only when the border-collapse property is set to no-collapse separate. Default Value: 2px Syntax: border-spacing: length|initial|inherit; Property values: length-length: It is used to set the distance between the border
2 min read
How to change character spacing of text canvas using Fabric.js ?
In this article, we are going to see how to change the character spacing of a text canvas using FabricJS. The canvas means text written is movable and can be stretched according to the requirement. Further, the text itself cannot be edited like a textbox.Approach: To make this possible, we are going to use a JavaScript library called FabricJS. Afte
2 min read
SVG word-spacing Attribute
The word-spacing attribute in SVG is used to indicate the spacing between words. This spacing can be changed by using the length value of the attribute. When the length is mentioned without a unit identifier, the browser processes it as a width value in the current user coordinate system, otherwise, if it is mentioned with one of the unit identifie
2 min read
SVG letter-spacing Attribute
The letter-spacing attribute controls spacing between text characters i.e. increasing or decreasing the space between characters in a text. Syntax: letter-spacing = keyword-values | length-values | global-values Attribute Values: The letter-spacing attribute accepts three values mentioned above and described below: keyword-values: This attribute va
1 min read
Article Tags :