Open In App

Bulma List of all spacing helpers

Last Updated : 09 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 align & organize the content on the web pages. For adding spacing in the form of margins and padding (from the top, left, bottom, right, or horizontally/vertically), Bulma provides 112 spacing helpers classes. Margins can be added using m classes like m-4, my-3, mx-6, mt-3, mb-1, mr-2, ml-4, m-auto and Padding can be added using p-4, py-3, px-6, pt-3, pb-1, pr-2, pl-4, and p-auto. The values of classes can include from 0 to 6, like mt-3, mb-6, or p-5, pr-1, & so on.

Bulma List of Spacing helpers Classes:

  • m-*: This class is used to add margin from all four sides.
  • mt-*: This class is used to add margin from the top.
  • ml-*: This class is used to add a margin from the left.
  • mb-*: This class is used to add margin from the bottom.
  • mr-*: This class is used to add margin from the right.
  • mx-*: This class is used to add margin from both left and right
  • my-*: This class is used to add a margin from both top and bottom.
  • p-*: This class is used to add padding from all four sides.
  • pr-*: This class is used to add padding from the right.
  • pb-*: This class is used to add padding from the bottom.
  • pl-*: This class is used to add padding from the left.
  • pt-*: This class is used to add padding from the top.
  • px-*: This class is used to add a margin from both left and right.
  • py-*: This class is used to add a margin from both top and bottom.

Syntax:

<p class="Spacing-helpers-Classes">
   ...
</p>

Example 1: The below example illustrates the list of spacing helpers in a Bulma.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bulma Spacing Helpers Class</title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="content container has-text-centered">
        <h1 class="title has-text-success">
            GeeksforGeeks
        </h1>
        <h1 class="subtitle">
            Bulma Spacing Helpers class
        </h1>
          
        <!-- Margin helpers -->
        <div class="container">
            <div class="container has-background-success">
                <button class="button is-danger m-4">m-4</button>
            </div>
            <div class="container has-background-success">
                <button class="button is-dark mt-4">mt-4</button>
            </div>
            <div class="container has-background-success">
                <button class="button is-light ml-4">ml-4</button>
            </div>
            <div class="container has-background-success">
                <button class="button is-dark mx-3">mx-3</button>
            </div>
            <div class="container has-background-success">
                <button class="button is-warning my-5">my-5</button>
            </div>
        </div>
        <br />
          
        <!-- Padding helpers -->
        <div class="container">
            <div class="container has-background-success">
                <button class="button is-danger p-4">p-4</button>
            </div>
            <div class="container has-background-success">
                <button class="button is-dark pt-4">pt-4</button>
            </div>
            <div class="container has-background-success">
                <button class="button is-light pl-6">pl-6</button>
            </div>
            <div class="container has-background-success">
                <button class="button is-dark px-3">px-3</button>
            </div>
            <div class="container has-background-success">
                <button class="button is-warning py-5">py-5</button>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Bulma List of all spacing helpers

Bulma List of all spacing helpers

Example 2: This example illustrates the list of spacing helpers in an <img>tag and <span> tag.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bulma Spacing Helpers List</title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="content container has-text-centered">
        <h1 class="title has-text-success">
            GeeksforGeeks
        </h1>
        <h1 class="subtitle">
            Bulma Spacing Helpers List
        </h1>
          
        <!-- Margin helpers -->
        <div class="container has-background-success">
            <div class="container is-4by3"
                <img src=
                     alt="GFG_logo" 
                     class="m-5" /> 
            </div>
            <div class="container is-4by3"
                <img src=
                     alt="GFG_logo" 
                     class="mt-6" /> 
            </div>
            <div class="container is-4by3"
                <img src=
                     alt="GFG_logo" 
                     class="ml-4" /> 
            </div>
            <div class="container is-4by3"
                <img src=
                     alt="GFG_logo" 
                     class="mx-4" /> 
            </div>
            <div class="container"
                <img src=
                     alt="GFG_logo"
                     class="my-5" /> 
            </div>
        </div>
        <br />
          
        <!-- Padding helpers -->
        <div class="container"
            <span class="tag is-primary is-dark px-1">
                PX-1
            </span>
            <span class="tag is-primary is-dark pt-4">
                PT-4
            </span
            <span class="tag is-primary is-dark pl-6">
                PL-6
            </span
            <span class="tag is-primary is-dark px-3">
                PX-3
            </span
            <span class="tag is-primary is-dark py-5">
                PY-5
            </span
        </div>
    </div>
</body>
  
</html>


Output:

Bulma List of all spacing helpers

Bulma List of all spacing helpers

Reference: https://bulma.io/documentation/helpers/spacing-helpers/#list-of-all-spacing-helpers



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 Other Visibility Helpers
Bulma is a free and open-source CSS framework based on flexbox. It comes with pre-styled components so we don't have to write everything from the ground up and hence cutting the development time of websites. In this article, we will be using Bulma visibility helpers other than show and hide helpers. Bulma Other Visibility Helpers Classes: is-invisi
3 min read
Bulma Typography Helpers
Bulma is a free, open-source framework of CSS to build responsive websites. It is based on the Flexbox. In this article, we will discuss Typography helpers. Typography helpers help us to change the properties like changing size, weight, alignment, font family, etc. Below are some properties of Typography helpers that we can use. Typography helpers:
2 min read
Bulma Helpers Complete Reference
Bulma is a free, 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. It allows us to add our own CSS styling but it is advised to use an external stylesheet over inline styling. The Bulma Helpers classes can b
1 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 Spacing Configuration
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 b
4 min read
Foundation CSS Typography Helpers Un-bulleted List
Foundation CSS is an open-source &amp; responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing &amp; can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is b
3 min read
Helpers in Codeignitor
Helpers are the reusable code in codeignitor like libraries. The only difference is that libraries are collection of classes whereas helper is defined as individual independent set of functions. Helper functions need to be loaded before using it. We can find all the helpers in codeignitor documentation Codeignitor Helpers and that can be used depen
4 min read
Materialize CSS Helpers
There are several helpers in materialize CSS that are used for designing needs such as: AlignmentHiding/Showing contentFormatting 1. Alignment: Content can be aligned horizontally or vertically by using the following classes: Vertical Align: It can be easily done by adding the class valign-wrapper to the container holding the items that you want to
3 min read
Inline HTML Helper - HTML Helpers in ASP.NET MVC
HTML Helpers are methods that returns HTML strings. These are used in the view. In simple terms, these are C# methods that are used to return HTML. Using HTML helpers you can render a text box, an area, image tag, etc. In MVC we have many built-in HTML helpers and we can create custom helpers too. Using HTML helpers a view can show model properties
2 min read
Article Tags :