Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma List of all spacing helpers

Improve Article
Save Article
  • Last Updated : 09 Mar, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!