Bulma List of all spacing helpers
Last Updated :
09 Mar, 2022
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>
<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 />
<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
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>
<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 />
<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
Reference: https://bulma.io/documentation/helpers/spacing-helpers/#list-of-all-spacing-helpers
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...