Bulma Spacing

Bulma provides a comprehensive spacing system with utility classes for margin and padding. These classes follow a consistent scale and work responsively across all screen sizes.

Spacing Scale

Bulma uses a predefined spacing scale based on multiples of 0.25rem. This creates consistent spacing throughout your design.

Spacing Values

Margin Utilities

Margin utilities add space outside an element's border.

All Sides Margin

<!-- Margin on all sides -->
<div class="m-0">No margin</div>
<div class="m-1">Margin level 1 (0.25rem)</div>
<div class="m-2">Margin level 2 (0.5rem)</div>
<div class="m-3">Margin level 3 (0.75rem)</div>
<div class="m-4">Margin level 4 (1rem)</div>
<div class="m-5">Margin level 5 (1.5rem)</div>
<div class="m-6">Margin level 6 (3rem)</div>
<div class="m-auto">Auto margin</div>

Direction-Specific Margin

<!-- Top margin -->
<div class="mt-0">No top margin</div>
<div class="mt-1">Top margin 1</div>
<div class="mt-2">Top margin 2</div>
<div class="mt-3">Top margin 3</div>
<div class="mt-4">Top margin 4</div>
<div class="mt-5">Top margin 5</div>
<div class="mt-6">Top margin 6</div>
<div class="mt-auto">Auto top margin</div>

<!-- Right margin -->
<div class="mr-0">No right margin</div>
<div class="mr-1">Right margin 1</div>
<div class="mr-2">Right margin 2</div>
<div class="mr-3">Right margin 3</div>
<div class="mr-4">Right margin 4</div>
<div class="mr-5">Right margin 5</div>
<div class="mr-6">Right margin 6</div>
<div class="mr-auto">Auto right margin</div>

<!-- Bottom margin -->
<div class="mb-0">No bottom margin</div>
<div class="mb-1">Bottom margin 1</div>
<div class="mb-2">Bottom margin 2</div>
<div class="mb-3">Bottom margin 3</div>
<div class="mb-4">Bottom margin 4</div>
<div class="mb-5">Bottom margin 5</div>
<div class="mb-6">Bottom margin 6</div>
<div class="mb-auto">Auto bottom margin</div>

<!-- Left margin -->
<div class="ml-0">No left margin</div>
<div class="ml-1">Left margin 1</div>
<div class="ml-2">Left margin 2</div>
<div class="ml-3">Left margin 3</div>
<div class="ml-4">Left margin 4</div>
<div class="ml-5">Left margin 5</div>
<div class="ml-6">Left margin 6</div>
<div class="ml-auto">Auto left margin</div>

Axis-Specific Margin

<!-- Horizontal margin (left and right) -->
<div class="mx-0">No horizontal margin</div>
<div class="mx-1">Horizontal margin 1</div>
<div class="mx-2">Horizontal margin 2</div>
<div class="mx-3">Horizontal margin 3</div>
<div class="mx-4">Horizontal margin 4</div>
<div class="mx-5">Horizontal margin 5</div>
<div class="mx-6">Horizontal margin 6</div>
<div class="mx-auto">Auto horizontal margin (centering)</div>

<!-- Vertical margin (top and bottom) -->
<div class="my-0">No vertical margin</div>
<div class="my-1">Vertical margin 1</div>
<div class="my-2">Vertical margin 2</div>
<div class="my-3">Vertical margin 3</div>
<div class="my-4">Vertical margin 4</div>
<div class="my-5">Vertical margin 5</div>
<div class="my-6">Vertical margin 6</div>
<div class="my-auto">Auto vertical margin</div>

Padding Utilities

Padding utilities add space inside an element's border.

All Sides Padding

<!-- Padding on all sides -->
<div class="p-0">No padding</div>
<div class="p-1">Padding level 1 (0.25rem)</div>
<div class="p-2">Padding level 2 (0.5rem)</div>
<div class="p-3">Padding level 3 (0.75rem)</div>
<div class="p-4">Padding level 4 (1rem)</div>
<div class="p-5">Padding level 5 (1.5rem)</div>
<div class="p-6">Padding level 6 (3rem)</div>

Direction-Specific Padding

<!-- Top padding -->
<div class="pt-0">No top padding</div>
<div class="pt-1">Top padding 1</div>
<div class="pt-2">Top padding 2</div>
<div class="pt-3">Top padding 3</div>
<div class="pt-4">Top padding 4</div>
<div class="pt-5">Top padding 5</div>
<div class="pt-6">Top padding 6</div>

<!-- Right padding -->
<div class="pr-0">No right padding</div>
<div class="pr-1">Right padding 1</div>
<div class="pr-2">Right padding 2</div>
<div class="pr-3">Right padding 3</div>
<div class="pr-4">Right padding 4</div>
<div class="pr-5">Right padding 5</div>
<div class="pr-6">Right padding 6</div>

<!-- Bottom padding -->
<div class="pb-0">No bottom padding</div>
<div class="pb-1">Bottom padding 1</div>
<div class="pb-2">Bottom padding 2</div>
<div class="pb-3">Bottom padding 3</div>
<div class="pb-4">Bottom padding 4</div>
<div class="pb-5">Bottom padding 5</div>
<div class="pb-6">Bottom padding 6</div>

<!-- Left padding -->
<div class="pl-0">No left padding</div>
<div class="pl-1">Left padding 1</div>
<div class="pl-2">Left padding 2</div>
<div class="pl-3">Left padding 3</div>
<div class="pl-4">Left padding 4</div>
<div class="pl-5">Left padding 5</div>
<div class="pl-6">Left padding 6</div>

Axis-Specific Padding

<!-- Horizontal padding (left and right) -->
<div class="px-0">No horizontal padding</div>
<div class="px-1">Horizontal padding 1</div>
<div class="px-2">Horizontal padding 2</div>
<div class="px-3">Horizontal padding 3</div>
<div class="px-4">Horizontal padding 4</div>
<div class="px-5">Horizontal padding 5</div>
<div class="px-6">Horizontal padding 6</div>

<!-- Vertical padding (top and bottom) -->
<div class="py-0">No vertical padding</div>
<div class="py-1">Vertical padding 1</div>
<div class="py-2">Vertical padding 2</div>
<div class="py-3">Vertical padding 3</div>
<div class="py-4">Vertical padding 4</div>
<div class="py-5">Vertical padding 5</div>
<div class="py-6">Vertical padding 6</div>

Responsive Spacing

All spacing utilities have responsive variants for different screen sizes.

Responsive Breakpoints

Responsive Margin Examples

<!-- Different margins per breakpoint -->
<div class="m-1-mobile m-3-tablet m-5-desktop">
  Small on mobile, medium on tablet, large on desktop
</div>

<!-- Responsive horizontal margin -->
<div class="mx-2-mobile mx-4-tablet mx-6-desktop">
  Responsive horizontal margin
</div>

<!-- Responsive vertical margin -->
<div class="my-1-mobile my-3-tablet my-4-desktop">
  Responsive vertical margin
</div>

<!-- Auto margin on specific breakpoints -->
<div class="ml-auto-mobile ml-0-tablet">
  Auto left margin only on mobile
</div>

<!-- Complex responsive spacing -->
<div class="mt-2-mobile mt-4-tablet mb-3-mobile mb-5-tablet">
  Different top and bottom margins per breakpoint
</div>

Responsive Padding Examples

<!-- Different padding per breakpoint -->
<div class="p-2-mobile p-4-tablet p-6-desktop">
  Small padding on mobile, medium on tablet, large on desktop
</div>

<!-- Responsive horizontal padding -->
<div class="px-1-mobile px-3-tablet px-5-desktop">
  Responsive horizontal padding
</div>

<!-- Responsive vertical padding -->
<div class="py-2-mobile py-4-tablet py-6-desktop">
  Responsive vertical padding
</div>

<!-- Asymmetric responsive padding -->
<div class="pt-3-mobile pt-5-tablet pb-2-mobile pb-4-tablet">
  Different top and bottom padding per breakpoint
</div>

Spacing in Components

Practical examples of using spacing utilities with Bulma components.

Card with Custom Spacing

<div class="card m-4">
  <div class="card-header p-4">
    <p class="card-header-title">Card Title</p>
  </div>
  <div class="card-content px-5 py-4">
    <div class="content">
      <p>Card content with custom padding</p>
    </div>
  </div>
  <div class="card-footer px-4 py-3">
    <div class="card-footer-item">Action 1</div>
    <div class="card-footer-item">Action 2</div>
  </div>
</div>

Button Groups with Spacing

<div class="buttons my-4">
  <button class="button is-primary mr-2">Primary</button>
  <button class="button is-light mr-2">Light</button>
  <button class="button is-dark">Dark</button>
</div>

<!-- Responsive button spacing -->
<div class="buttons my-2-mobile my-4-tablet">
  <button class="button is-info mr-1-mobile mr-3-tablet">Info</button>
  <button class="button is-success">Success</button>
</div>

Form Layout with Spacing

<form class="p-4">
  <div class="field mb-4">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" placeholder="Email">
    </div>
  </div>
  
  <div class="field mb-4">
    <label class="label">Password</label>
    <div class="control">
      <input class="input" type="password" placeholder="Password">
    </div>
  </div>
  
  <div class="field mb-5">
    <div class="control">
      <button class="button is-primary is-fullwidth">Sign In</button>
    </div>
  </div>
</form>

Grid Layout with Spacing

<div class="columns is-multiline my-4">
  <div class="column is-4 mb-4">
    <div class="box p-4">Card 1</div>
  </div>
  <div class="column is-4 mb-4">
    <div class="box p-4">Card 2</div>
  </div>
  <div class="column is-4 mb-4">
    <div class="box p-4">Card 3</div>
  </div>
</div>

<!-- Responsive grid spacing -->
<div class="columns is-multiline my-2-mobile my-5-tablet">
  <div class="column is-6-mobile is-4-tablet mb-3-mobile mb-4-tablet">
    <div class="box p-3-mobile p-4-tablet">Responsive Card</div>
  </div>
</div>

Customizing Spacing

You can customize Bulma's spacing scale using Sass variables.

Custom Spacing Scale

// Import Bulma utilities
@import "bulma/sass/utilities/initial-variables";

// Custom spacing scale
$spacing-unit: 0.25rem; // Base unit

$spacing-0: 0;
$spacing-1: $spacing-unit;      // 0.25rem
$spacing-2: $spacing-unit * 2;  // 0.5rem
$spacing-3: $spacing-unit * 3;  // 0.75rem
$spacing-4: $spacing-unit * 4;  // 1rem
$spacing-5: $spacing-unit * 6;  // 1.5rem
$spacing-6: $spacing-unit * 12; // 3rem

// Additional custom sizes
$spacing-7: $spacing-unit * 16; // 4rem
$spacing-8: $spacing-unit * 24; // 6rem

// Update spacing map
$spacing-values: (
  "0": $spacing-0,
  "1": $spacing-1,
  "2": $spacing-2,
  "3": $spacing-3,
  "4": $spacing-4,
  "5": $spacing-5,
  "6": $spacing-6,
  "7": $spacing-7,
  "8": $spacing-8
);

// Import the rest of Bulma
@import "bulma";

Using Custom Spacing

<!-- Using custom spacing classes -->
<div class="m-7">Custom margin level 7</div>
<div class="p-8">Custom padding level 8</div>
<div class="mx-7 my-8">Custom axis spacing</div>

Negative Margin

Bulma also provides negative margin utilities for special layout needs.

<!-- Negative margin utilities -->
<div class="m-n1">Negative margin 1</div>
<div class="m-n2">Negative margin 2</div>
<div class="m-n3">Negative margin 3</div>
<div class="m-n4">Negative margin 4</div>
<div class="m-n5">Negative margin 5</div>
<div class="m-n6">Negative margin 6</div>

<!-- Direction-specific negative margins -->
<div class="mt-n2">Negative top margin 2</div>
<div class="mr-n3">Negative right margin 3</div>
<div class="mb-n4">Negative bottom margin 4</div>
<div class="ml-n5">Negative left margin 5</div>

<!-- Axis-specific negative margins -->
<div class="mx-n2">Negative horizontal margin 2</div>
<div class="my-n3">Negative vertical margin 3</div>

Best Practices

1. Consistent Spacing Scale

• Stick to the predefined spacing scale for consistency
• Use even numbers for vertical rhythm
• Establish a spacing system early in the project

2. Responsive Considerations

• Use smaller spacing on mobile devices
• Increase spacing on larger screens for better readability
• Test spacing on actual devices

3. Performance and Maintainability

• Use utility classes instead of custom CSS for common spacing
• Combine multiple spacing classes when needed
• Use responsive variants for adaptive layouts

4. Accessibility

• Ensure sufficient spacing for touch targets (minimum 44px)
• Maintain adequate line spacing for readability
• Use consistent spacing for predictable user experience

Common Spacing Patterns

Section Spacing

<section class="section py-6">
  <div class="container">
    <h2 class="title mb-5">Section Title</h2>
    <div class="content">
      <p class="mb-4">Section content with consistent spacing.</p>
    </div>
  </div>
</section>

Card Grid

<div class="columns is-multiline my-5">
  <div class="column is-4 mb-4">
    <div class="card">
      <div class="card-content p-4">
        <p class="title is-5 mb-3">Card Title</p>
        <p class="mb-4">Card content with padding.</p>
        <button class="button is-primary">Action</button>
      </div>
    </div>
  </div>
</div>

Form Layout

<form class="p-5">
  <div class="field mb-4">
    <label class="label mb-2">Field Label</label>
    <div class="control">
      <input class="input" type="text">
    </div>
  </div>
  
  <div class="field mb-5">
    <div class="control">
      <button class="button is-primary is-fullwidth">Submit</button>
    </div>
  </div>
</form>

Up next: Bulma Responsive Helpers