Bulma Responsive Helpers

Bulma provides a comprehensive set of responsive helpers that allow you to control visibility, display properties, text alignment, and more across different screen sizes. These utilities follow a mobile-first approach.

Breakpoints

Bulma's responsive helpers are based on five screen size breakpoints:

Visibility Helpers

Control element visibility across different screen sizes.

Show/Hide by Screen Size

Visibility Classes

<!-- Hide on mobile -->
<div class="is-hidden-mobile">Hidden on mobile only</div>

<!-- Hide on tablet and below -->
<div class="is-hidden-touch">Hidden on mobile & tablet</div>

<!-- Hide on tablet only -->
<div class="is-hidden-tablet-only">Hidden on tablet only</div>

<!-- Hide on desktop and above -->
<div class="is-hidden-desktop">Hidden on desktop & above</div>

<!-- Hide on desktop only -->
<div class="is-hidden-desktop-only">Hidden on desktop only</div>

<!-- Hide on widescreen and above -->
<div class="is-hidden-widescreen">Hidden on widescreen & above</div>

<!-- Hide on widescreen only -->
<div class="is-hidden-widescreen-only">Hidden on widescreen only</div>

<!-- Hide on fullhd and above -->
<div class="is-hidden-fullhd">Hidden on fullhd & above</div>

Show Classes

<!-- Show only on mobile -->
<div class="is-block-mobile">Visible only on mobile</div>
<div class="is-flex-mobile">Flex only on mobile</div>

<!-- Show only on tablet -->
<div class="is-block-tablet-only">Visible only on tablet</div>

<!-- Show from tablet and up -->
<div class="is-block-tablet">Visible on tablet & above</div>

<!-- Show from desktop and up -->
<div class="is-block-desktop">Visible on desktop & above</div>

Display Helpers

Control the CSS display property responsively.

Responsive Display Classes

<!-- Block display -->
<div class="is-block">Always block</div>
<div class="is-block-mobile">Block on mobile only</div>
<div class="is-block-tablet">Block on tablet & above</div>
<div class="is-block-desktop">Block on desktop & above</div>
<div class="is-block-widescreen">Block on widescreen & above</div>
<div class="is-block-fullhd">Block on fullhd & above</div>

<!-- Flex display -->
<div class="is-flex">Always flex</div>
<div class="is-flex-mobile">Flex on mobile only</div>
<div class="is-flex-tablet">Flex on tablet & above</div>
<div class="is-flex-desktop">Flex on desktop & above</div>

<!-- Inline display -->
<span class="is-inline">Always inline</span>
<span class="is-inline-mobile">Inline on mobile only</span>

<!-- Inline-block display -->
<div class="is-inline-block">Always inline-block</div>
<div class="is-inline-block-tablet">Inline-block on tablet & above</div>

Text Alignment

Control text alignment responsively.

Text Alignment Classes

<!-- Left alignment -->
<p class="has-text-left">Always left aligned</p>
<p class="has-text-left-mobile">Left on mobile only</p>
<p class="has-text-left-tablet">Left on tablet & above</p>
<p class="has-text-left-desktop">Left on desktop & above</p>
<p class="has-text-left-widescreen">Left on widescreen & above</p>
<p class="has-text-left-fullhd">Left on fullhd & above</p>

<!-- Center alignment -->
<p class="has-text-centered">Always centered</p>
<p class="has-text-centered-mobile">Centered on mobile only</p>
<p class="has-text-centered-tablet">Centered on tablet & above</p>

<!-- Right alignment -->
<p class="has-text-right">Always right aligned</p>
<p class="has-text-right-mobile">Right on mobile only</p>
<p class="has-text-right-desktop">Right on desktop & above</p>

Float Helpers

Control element floating responsively.

<!-- Float left -->
<div class="is-pulled-left">Always float left</div>
<div class="is-pulled-left-mobile">Float left on mobile only</div>
<div class="is-pulled-left-tablet">Float left on tablet & above</div>

<!-- Float right -->
<div class="is-pulled-right">Always float right</div>
<div class="is-pulled-right-desktop">Float right on desktop & above</div>

<!-- Clear floats -->
<div class="is-clearfix"></div>

Spacing Helpers

Control margins and padding responsively.

Responsive Margin

<!-- Margin all sides -->
<div class="m-0">No margin</div>
<div class="m-1">Small margin</div>
<div class="m-2">Medium margin</div>
<div class="m-3">Large margin</div>
<div class="m-4">Extra large margin</div>
<div class="m-5">Extra extra large margin</div>
<div class="m-6">Largest margin</div>

<!-- Responsive margin -->
<div class="m-0-mobile m-3-tablet">No margin on mobile, medium on tablet+</div>
<div class="m-1-desktop">Small margin on desktop+</div>

<!-- Margin sides -->
<div class="mt-2">Margin top 2</div>
<div class="mr-3">Margin right 3</div>
<div class="mb-4">Margin bottom 4</div>
<div class="ml-1">Margin left 1</div>
<div class="mx-2">Margin left & right 2</div>
<div class="my-3">Margin top & bottom 3</div>

<!-- Responsive margin sides -->
<div class="mt-0-mobile mt-3-tablet">No top margin on mobile, medium on tablet+</div>
<div class="mx-auto-desktop">Auto horizontal margin on desktop+</div>

Responsive Padding

<!-- Padding all sides -->
<div class="p-0">No padding</div>
<div class="p-1">Small padding</div>
<div class="p-2">Medium padding</div>
<div class="p-3">Large padding</div>
<div class="p-4">Extra large padding</div>
<div class="p-5">Extra extra large padding</div>
<div class="p-6">Largest padding</div>

<!-- Responsive padding -->
<div class="p-1-mobile p-3-tablet">Small padding on mobile, medium on tablet+</div>
<div class="p-2-desktop">Medium padding on desktop+</div>

<!-- Padding sides -->
<div class="pt-2">Padding top 2</div>
<div class="pr-3">Padding right 3</div>
<div class="pb-4">Padding bottom 4</div>
<div class="pl-1">Padding left 1</div>
<div class="px-2">Padding left & right 2</div>
<div class="py-3">Padding top & bottom 3</div>

<!-- Responsive padding sides -->
<div class="px-1-mobile px-3-tablet">Small horizontal padding on mobile, medium on tablet+</div>

Width Helpers

Control element width responsively.

<!-- Full width -->
<div class="is-fullwidth">100% width</div>

<!-- Responsive width -->
<div class="is-fullwidth-mobile">Full width on mobile only</div>
<div class="is-three-quarters-tablet">75% width on tablet+</div>
<div class="is-two-thirds-desktop">66.66% width on desktop+</div>
<div class="is-half-widescreen">50% width on widescreen+</div>
<div class="is-one-third-fullhd">33.33% width on fullhd+</div>
<div class="is-one-quarter">25% width always</div>

<!-- Fixed width -->
<div class="is-128x128">128x128 pixels</div>
<div class="is-64x64-mobile is-128x128-tablet">64px on mobile, 128px on tablet+</div>

Other Responsive Helpers

Responsive Typography

<!-- Responsive font size -->
<p class="is-size-1">Size 1 always</p>
<p class="is-size-2-mobile is-size-1-tablet">Size 2 on mobile, Size 1 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 fullhd+</p>

<!-- Responsive text transformation -->
<p class="is-capitalized">Always capitalized</p>
<p class="is-capitalized-mobile is-lowercase-tablet">Capitalized on mobile, lowercase on tablet+</p>
<p class="is-uppercase-desktop">Uppercase on desktop+</p>

Responsive Colors

<!-- Responsive background colors -->
<div class="has-background-primary has-background-success-mobile">
  Primary background (success on mobile)
</div>

<!-- Responsive text colors -->
<p class="has-text-danger has-text-warning-tablet">
  Danger text (warning on tablet+)
</p>

Practical Examples

Responsive Navigation

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- Logo visible on all screens -->
    <a class="navbar-item" href="#">
      <strong>MySite</strong>
    </a>
    
    <!-- Burger menu visible only on mobile/tablet -->
    <a role="button" class="navbar-burger is-hidden-desktop" aria-label="menu">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  
  <!-- Menu items -->
  <div class="navbar-menu">
    <div class="navbar-start">
      <!-- These items hidden on mobile, visible on tablet+ -->
      <a class="navbar-item is-hidden-mobile is-flex-tablet">Home</a>
      <a class="navbar-item is-hidden-mobile is-flex-tablet">About</a>
      <a class="navbar-item is-hidden-mobile is-flex-tablet">Contact</a>
    </div>
    
    <div class="navbar-end">
      <!-- Search bar - full width on mobile, auto on larger -->
      <div class="navbar-item">
        <div class="field is-fullwidth-mobile">
          <div class="control">
            <input class="input" type="text" placeholder="Search">
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

Responsive Card Grid

<div class="columns is-multiline">
  <!-- Full width on mobile, half on tablet, third on desktop -->
  <div class="column is-full-mobile is-half-tablet is-one-third-desktop">
    <div class="card">
      <div class="card-content">
        <p class="title is-4 is-size-5-mobile">Card 1</p>
        <p class="has-text-justified has-text-left-mobile">Content here</p>
      </div>
    </div>
  </div>
  
  <div class="column is-full-mobile is-half-tablet is-one-third-desktop">
    <div class="card">
      <div class="card-content">
        <p class="title is-4 is-size-5-mobile">Card 2</p>
        <p class="has-text-justified has-text-left-mobile">Content here</p>
      </div>
    </div>
  </div>
  
  <div class="column is-full-mobile is-half-tablet is-one-third-desktop">
    <div class="card">
      <div class="card-content">
        <p class="title is-4 is-size-5-mobile">Card 3</p>
        <p class="has-text-justified has-text-left-mobile">Content here</p>
      </div>
    </div>
  </div>
</div>

Responsive Form Layout

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label is-hidden-mobile">Name</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <!-- Different placeholder text for mobile -->
        <input 
          class="input" 
          type="text" 
          placeholder="Your name"
          placeholder-mobile="Name"
        >
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label is-hidden-mobile">Email</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input" type="email" placeholder="Email address">
      </div>
    </div>
  </div>
</div>

<!-- Stack buttons on mobile, inline on larger screens -->
<div class="field is-grouped is-grouped-centered">
  <div class="control is-fullwidth-mobile">
    <button class="button is-primary is-fullwidth-mobile">Submit</button>
  </div>
  <div class="control is-fullwidth-mobile">
    <button class="button is-light is-fullwidth-mobile">Cancel</button>
  </div>
</div>

Custom Responsive Classes

You can create your own responsive helpers using Sass.

Sass Customization

// Custom breakpoints
$tablet: 768px;
$desktop: 1024px;
$widescreen: 1200px;
$fullhd: 1400px;

// Custom responsive mixin
@mixin responsive($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: $tablet - 1px) {
      @content;
    }
  } @else if $breakpoint == tablet {
    @media (min-width: $tablet) {
      @content;
    }
  } @else if $breakpoint == desktop {
    @media (min-width: $desktop) {
      @content;
    }
  }
}

// Custom responsive class
.is-custom-hidden-mobile {
  @include responsive(mobile) {
    display: none !important;
  }
}

.is-custom-visible-desktop {
  @include responsive(desktop) {
    display: block !important;
  }
}

// Custom responsive spacing
@for $i from 0 through 6 {
  .custom-mt-#{$i}-mobile {
    @include responsive(mobile) {
      margin-top: $i * 0.5rem !important;
    }
  }
}

Best Practices

1. Mobile-First Approach

• Start with mobile styles as default
• Add larger screen styles with is-*-tablet, is-*-desktop, etc.
• Use is-hidden-mobile to hide elements on small screens
• Test on actual mobile devices

2. Performance Considerations

• Avoid excessive use of responsive helpers (CSS bloat)
• Combine related styles in single classes when possible
• Use is-hidden-* instead of loading content that won't be displayed
• Consider using CSS Grid or Flexbox for complex responsive layouts

3. Accessibility

• Ensure hidden content is still accessible to screen readers when appropriate
• Maintain proper reading order when rearranging content
• Test keyboard navigation for all screen sizes
• Ensure touch targets are large enough on mobile (minimum 44x44px)

4. Testing Strategy

• Test all breakpoints (mobile, tablet, desktop, widescreen)
• Check portrait and landscape orientations
• Test with different zoom levels
• Verify print styles if needed

Common Patterns

1. Show/Hide Based on Screen Size

<!-- Mobile menu toggle -->
<button class="button is-primary is-hidden-desktop">
  Menu
</button>

<!-- Desktop navigation -->
<nav class="navbar is-hidden-touch">
  <!-- Desktop navigation items -->
</nav>

<!-- Different content for mobile vs desktop -->
<div class="is-hidden-desktop">
  <p>Mobile-optimized content</p>
</div>

<div class="is-hidden-touch">
  <p>Desktop-optimized content</p>
</div>

2. Responsive Typography

<h1 class="title is-1 is-size-2-mobile is-size-1-tablet">
  Responsive Heading
</h1>

<p class="subtitle is-4 is-size-5-mobile">
  This subtitle adjusts based on screen size
</p>

<p class="has-text-justified has-text-left-mobile">
  Justified text on larger screens, left-aligned on mobile
</p>

3. Responsive Spacing

<div class="section py-2-mobile py-5-tablet">
  <!-- Less padding on mobile, more on tablet -->
</div>

<div class="container mx-1-mobile mx-3-desktop">
  <!-- Narrower margins on mobile -->
</div>

<div class="columns is-mobile is-multiline">
  <div class="column is-half-mobile is-one-third-tablet">
    <!-- Different column widths at different breakpoints -->
  </div>
</div>

Try It Yourself

Experiment with responsive helpers:

<button class="button is-primary">Click me</button>
<div class="notification is-success">
  <button class="delete"></button>
  Success! Your code is working.
</div>

Up next: Bulma Container Component