Bulma Helpers

Bulma provides a comprehensive set of helper classes that allow you to quickly style elements without writing custom CSS. These utility classes cover colors, typography, spacing, visibility, and more.

Color Helpers

Color helpers allow you to set text and background colors using predefined color classes.

Text Colors

<p class="has-text-primary">Primary text</p>
<p class="has-text-link">Link text</p>
<p class="has-text-info">Info text</p>
<p class="has-text-success">Success text</p>
<p class="has-text-warning">Warning text</p>
<p class="has-text-danger">Danger text</p>
<p class="has-text-black">Black text</p>
<p class="has-text-dark">Dark text</p>
<p class="has-text-light">Light text</p>
<p class="has-text-white">White text</p>
<p class="has-text-black-bis">Black bis text</p>
<p class="has-text-black-ter">Black ter text</p>
<p class="has-text-grey-darker">Grey darker text</p>
<p class="has-text-grey-dark">Grey dark text</p>
<p class="has-text-grey">Grey text</p>
<p class="has-text-grey-light">Grey light text</p>
<p class="has-text-grey-lighter">Grey lighter text</p>
<p class="has-text-white-ter">White ter text</p>
<p class="has-text-white-bis">White bis text</p>

Background Colors

<div class="has-background-primary">Primary background</div>
<div class="has-background-link">Link background</div>
<div class="has-background-info">Info background</div>
<div class="has-background-success">Success background</div>
<div class="has-background-warning">Warning background</div>
<div class="has-background-danger">Danger background</div>
<div class="has-background-black">Black background</div>
<div class="has-background-dark">Dark background</div>
<div class="has-background-light">Light background</div>
<div class="has-background-white">White background</div>
<div class="has-background-black-bis">Black bis background</div>
<div class="has-background-black-ter">Black ter background</div>
<div class="has-background-grey-darker">Grey darker background</div>
<div class="has-background-grey-dark">Grey dark background</div>
<div class="has-background-grey">Grey background</div>
<div class="has-background-grey-light">Grey light background</div>
<div class="has-background-grey-lighter">Grey lighter background</div>
<div class="has-background-white-ter">White ter background</div>
<div class="has-background-white-bis">White bis background</div>

Typography Helpers

Typography helpers control text alignment, transformation, weight, and family.

Text Alignment

<p class="has-text-centered">Centered text</p>
<p class="has-text-justified">Justified text</p>
<p class="has-text-left">Left aligned text</p>
<p class="has-text-right">Right aligned text</p>

<!-- Responsive text alignment -->
<p class="has-text-left-mobile">Left on mobile</p>
<p class="has-text-centered-tablet">Centered on tablet</p>
<p class="has-text-right-desktop">Right on desktop</p>
<p class="has-text-left-widescreen">Left on widescreen</p>
<p class="has-text-centered-fullhd">Centered on full HD</p>

Text Transformation

<p class="is-capitalized">Capitalized text</p>
<p class="is-lowercase">Lowercase text</p>
<p class="is-uppercase">Uppercase text</p>
<p class="is-italic">Italic text</p>

<!-- Text weight -->
<p class="has-text-weight-light">Light weight</p>
<p class="has-text-weight-normal">Normal weight</p>
<p class="has-text-weight-medium">Medium weight</p>
<p class="has-text-weight-semibold">Semibold weight</p>
<p class="has-text-weight-bold">Bold weight</p>

Font Family

<p class="is-family-primary">Primary font family</p>
<p class="is-family-secondary">Secondary font family</p>
<p class="is-family-sans-serif">Sans-serif font family</p>
<p class="is-family-monospace">Monospace font family</p>
<p class="is-family-code">Code font family</p>

Text Size

<p class="is-size-1">Size 1</p>
<p class="is-size-2">Size 2</p>
<p class="is-size-3">Size 3</p>
<p class="is-size-4">Size 4</p>
<p class="is-size-5">Size 5</p>
<p class="is-size-6">Size 6</p>
<p class="is-size-7">Size 7</p>

<!-- Responsive text sizes -->
<p class="is-size-1-mobile">Size 1 on mobile</p>
<p class="is-size-2-tablet">Size 2 on tablet</p>
<p class="is-size-3-desktop">Size 3 on desktop</p>
<p class="is-size-4-widescreen">Size 4 on widescreen</p>
<p class="is-size-5-fullhd">Size 5 on full HD</p>

Spacing Helpers

Spacing helpers provide margin and padding utilities for consistent spacing throughout your design.

Margin

<!-- All sides -->
<div class="m-0">No margin</div>
<div class="m-1">Margin level 1</div>
<div class="m-2">Margin level 2</div>
<div class="m-3">Margin level 3</div>
<div class="m-4">Margin level 4</div>
<div class="m-5">Margin level 5</div>
<div class="m-6">Margin level 6</div>
<div class="m-auto">Auto margin</div>

<!-- Specific sides -->
<div class="mt-0">Margin top 0</div>
<div class="mr-0">Margin right 0</div>
<div class="mb-0">Margin bottom 0</div>
<div class="ml-0">Margin left 0</div>
<div class="mx-0">Margin left and right 0</div>
<div class="my-0">Margin top and bottom 0</div>

<!-- Responsive margin -->
<div class="m-0-mobile">No margin on mobile</div>
<div class="mt-4-tablet">Margin top 4 on tablet</div>
<div class="mr-3-desktop">Margin right 3 on desktop</div>
<div class="mb-2-widescreen">Margin bottom 2 on widescreen</div>
<div class="ml-1-fullhd">Margin left 1 on full HD</div>

Padding

<!-- All sides -->
<div class="p-0">No padding</div>
<div class="p-1">Padding level 1</div>
<div class="p-2">Padding level 2</div>
<div class="p-3">Padding level 3</div>
<div class="p-4">Padding level 4</div>
<div class="p-5">Padding level 5</div>
<div class="p-6">Padding level 6</div>

<!-- Specific sides -->
<div class="pt-0">Padding top 0</div>
<div class="pr-0">Padding right 0</div>
<div class="pb-0">Padding bottom 0</div>
<div class="pl-0">Padding left 0</div>
<div class="px-0">Padding left and right 0</div>
<div class="py-0">Padding top and bottom 0</div>

<!-- Responsive padding -->
<div class="p-0-mobile">No padding on mobile</div>
<div class="pt-4-tablet">Padding top 4 on tablet</div>
<div class="pr-3-desktop">Padding right 3 on desktop</div>
<div class="pb-2-widescreen">Padding bottom 2 on widescreen</div>
<div class="pl-1-fullhd">Padding left 1 on full HD</div>

Display Helpers

Display helpers control the visibility and display properties of elements.

Display Properties

<div class="is-block">Block display</div>
<div class="is-flex">Flex display</div>
<div class="is-inline">Inline display</div>
<div class="is-inline-block">Inline block display</div>
<div class="is-inline-flex">Inline flex display</div>

<!-- Responsive display -->
<div class="is-block-mobile">Block on mobile</div>
<div class="is-flex-tablet">Flex on tablet</div>
<div class="is-inline-desktop">Inline on desktop</div>
<div class="is-inline-block-widescreen">Inline block on widescreen</div>
<div class="is-inline-flex-fullhd">Inline flex on full HD</div>

Visibility

<div class="is-hidden">Hidden</div>
<div class="is-sr-only">Screen reader only</div>
<div class="is-invisible">Invisible but occupies space</div>

<!-- Responsive visibility -->
<div class="is-hidden-mobile">Hidden on mobile</div>
<div class="is-hidden-tablet-only">Hidden on tablet only</div>
<div class="is-hidden-desktop-only">Hidden on desktop only</div>
<div class="is-hidden-touch">Hidden on touch devices</div>
<div class="is-hidden-widescreen-only">Hidden on widescreen only</div>
<div class="is-hidden-fullhd">Hidden on full HD</div>

<!-- Responsive visible -->
<div class="is-block-mobile">Visible as block on mobile</div>
<div class="is-flex-tablet">Visible as flex on tablet</div>

Other Helpers

Float Helpers

<div class="is-clearfix">Clearfix</div>
<div class="is-pulled-left">Pulled left</div>
<div class="is-pulled-right">Pulled right</div>

<!-- Responsive float -->
<div class="is-pulled-left-mobile">Pulled left on mobile</div>
<div class="is-pulled-right-tablet">Pulled right on tablet</div>

Overflow Helpers

<div class="is-clipped">Clipped overflow</div>
<div class="is-overlay">Overlay position</div>

<!-- Overflow behavior -->
<div class="has-overflow-hidden">Hidden overflow</div>
<div class="has-overflow-scroll">Scroll overflow</div>
<div class="has-overflow-auto">Auto overflow</div>
<div class="has-overflow-visible">Visible overflow</div>
<div class="has-overflow-x-hidden">Hidden overflow X</div>
<div class="has-overflow-y-scroll">Scroll overflow Y</div>

Position Helpers

<div class="is-relative">Relative position</div>
<div class="is-absolute">Absolute position</div>
<div class="is-fixed">Fixed position</div>
<div class="is-sticky">Sticky position</div>

<!-- Position values -->
<div class="is-top-0">Top 0</div>
<div class="is-right-0">Right 0</div>
<div class="is-bottom-0">Bottom 0</div>
<div class="is-left-0">Left 0</div>

Ratio Helpers

<div class="is-square">Square (1x1)</div>
<div class="is-1by1">1 by 1</div>
<div class="is-5by4">5 by 4</div>
<div class="is-4by3">4 by 3</div>
<div class="is-3by2">3 by 2</div>
<div class="is-5by3">5 by 3</div>
<div class="is-16by9">16 by 9</div>
<div class="is-2by1">2 by 1</div>
<div class="is-3by1">3 by 1</div>
<div class="is-4by5">4 by 5</div>
<div class="is-3by4">3 by 4</div>
<div class="is-2by3">2 by 3</div>
<div class="is-3by5">3 by 5</div>
<div class="is-9by16">9 by 16</div>
<div class="is-1by2">1 by 2</div>
<div class="is-1by3">1 by 3</div>

Responsive Helpers

Bulma provides responsive variants for many helper classes, allowing you to apply different styles at different breakpoints.

Breakpoint Suffixes

Responsive Examples

<!-- Different text alignment per breakpoint -->
<p class="has-text-left-mobile has-text-centered-tablet has-text-right-desktop">
  Responsive text alignment
</p>

<!-- Different spacing per breakpoint -->
<div class="m-2-mobile m-4-tablet m-6-desktop">
  Responsive margins
</div>

<!-- Different display per breakpoint -->
<div class="is-block-mobile is-flex-tablet is-inline-desktop">
  Responsive display
</div>

<!-- Hide on specific breakpoints -->
<div class="is-hidden-mobile is-hidden-desktop-only">
  Visible only on tablet
</div>

Best Practices

• Use helper classes for quick prototyping and adjustments
• Combine multiple helper classes for complex styling
• Use responsive helpers for mobile-first design
• Maintain consistency by using the same spacing values
• Override helper classes with custom CSS when needed
• Use semantic class names for better maintainability

Up next: Bulma Overview