Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Spacing Configuration

Improve Article
Save Article
  • Last Updated : 27 Oct, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!