Other Helpers

Bulma provides a collection of additional utility helpers that solve common CSS challenges and provide convenient styling shortcuts. These miscellaneous helpers are essential for fine-tuning layouts and addressing specific design requirements.

Composable hook

These props are also available standalone via the useOtherClasses hook — see Composable Mini-Hooks.

Reference

This page documents the bestax-bulma prop API for Bulma's other helpers. For the underlying CSS utilities, see the official Bulma other helpers.

tip

Many of these helpers are available as direct props through the useBulmaClasses hook in bestax-bulma, providing a clean and type-safe way to apply these utility styles to any component in the library.

Float

The float helpers allow you to move elements to the left or right of their container. These are useful for creating simple layouts and aligning content within containers.

Property	Bulma Class	CSS Property
`float="left"`	`is-pulled-left`	`float: left`
`float="right"`	`is-pulled-right`	`float: right`

Float helpers are particularly useful for aligning elements within text content or creating simple two-column layouts.

Float Examples

import { Box, Button, Content, Card, Image } from '@allxsmith/bestax-bulma';

function FloatExamples() {
  return (
    <Box p="4">
      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Float Left</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content>
            <Box
              float="left"
              bgColor="primary"
              textColor="white"
              p="3"
              mr="3"
              mb="2"
              style={{ width: '150px' }}
            >
              Floated Left
            </Box>
            This text flows around the floated element on the left. Lorem ipsum
            dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud exercitation ullamco laboris.
          </Content>
        </Card.Content>
      </Card>

      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Float Right</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content>
            <Box
              float="right"
              bgColor="info"
              textColor="white"
              p="3"
              ml="3"
              mb="2"
              style={{ width: '150px' }}
            >
              Floated Right
            </Box>
            This text flows around the floated element on the right. Lorem ipsum
            dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud exercitation ullamco laboris.
          </Content>
        </Card.Content>
      </Card>

      <Card>
        <Card.Header>
          <Card.Header.Title>
            Practical Example: Article with Image
          </Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content>
            <Image
              src="https://bulma.io/assets/images/placeholders/256x256.png"
              alt="Article image"
              float="left"
              mr="3"
              mb="3"
              style={{ width: '128px', height: '128px' }}
            />
            <strong>Article Title:</strong> This is how you can create an
            article layout with a floating image. The image floats to the left
            while the text content flows around it naturally. This is a common
            pattern in blog posts, news articles, and content-heavy websites.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Content>
        </Card.Content>
      </Card>
    </Box>
  );
}

Clearfix

The clearfix helper fixes an element's floating children by clearing floats. This is essential when you have floating elements inside a container and need the container to properly wrap around them.

Property	Bulma Class	CSS Property
`clearfix={true}`	`is-clearfix`	Clears floating children

The clearfix helper fixes an element's floating children by clearing floats. This is essential when you have floating elements inside a container and need the container to properly wrap around them.

Clearfix Examples

import { Box, Button, Content, Card } from '@allxsmith/bestax-bulma';

function ClearfixExamples() {
  return (
    <Box p="4">
      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Without Clearfix</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content mb="3">
            This container doesn't clear its floating children, so it collapses:
          </Content>
          <Box bgColor="danger" p="3" textColor="white">
            <Box float="left" bgColor="white" textColor="dark" p="2" mr="2">
              Float Left
            </Box>
            <Box float="right" bgColor="white" textColor="dark" p="2">
              Float Right
            </Box>
            {/* Container collapses because it doesn't clear floats */}
          </Box>
        </Card.Content>
      </Card>

      <Card>
        <Card.Header>
          <Card.Header.Title>With Clearfix</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content mb="3">
            This container properly contains its floating children:
          </Content>
          <Box bgColor="success" p="3" textColor="white" clearfix>
            <Box float="left" bgColor="white" textColor="dark" p="2" mr="2">
              Float Left
            </Box>
            <Box float="right" bgColor="white" textColor="dark" p="2">
              Float Right
            </Box>
            {/* Container properly wraps around floating children */}
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}

Overlay

The overlay helper completely covers the first positioned parent element. This is useful for creating modal backdrops, loading overlays, or image overlays.

Property	Bulma Class	CSS Property
`overlay={true}`	`is-overlay`	Absolutely positioned full coverage

Positioning Requirement

The overlay helper requires the parent element to have position: relative, position: absolute, or position: fixed to work correctly.

For what a pos or relative does beside overlay, see Overlay in the useBulmaClasses reference.

Overlay Examples

import { Box, Button, Content, Card, Title } from '@allxsmith/bestax-bulma';

function OverlayExamples() {
  return (
    <Box p="4">
      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Image Overlay</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box relative style={{ height: '200px' }}>
            <Box
              style={{
                backgroundImage:
                  'url(https://bulma.io/assets/images/placeholders/640x480.png)',
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                height: '100%',
              }}
            />
            <Box
              overlay={true}
              bgColor="dark"
              style={{ opacity: 0.7 }}
              display="flex"
              alignItems="center"
              justifyContent="center"
            >
              <Title textColor="white" size="4" textAlign="centered">
                Overlay Content
              </Title>
            </Box>
          </Box>
        </Card.Content>
      </Card>

      <Card>
        <Card.Header>
          <Card.Header.Title>Loading Overlay</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box bgColor="light" p="4" relative style={{ height: '150px' }}>
            <Content>
              <p>
                This is the main content that gets covered by the loading
                overlay.
              </p>
              <Button color="primary">Action Button</Button>
            </Content>

            <Box
              overlay={true}
              bgColor="white"
              style={{ opacity: 0.9 }}
              display="flex"
              alignItems="center"
              justifyContent="center"
            >
              <Content textAlign="centered">
                <Title size="5" mb="2">
                  Loading...
                </Title>
                <Content>Please wait while we process your request.</Content>
              </Content>
            </Box>
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}

Overflow

The overflow helpers decide what happens to content that extends beyond an element's boundaries. overflow="clipped" is the classic one, clipping it with overflow: hidden. overflow also takes the CSS keywords Bulma has helpers for, and overflowX and overflowY set one axis. Beside overflow, an axis prop wins on its own axis and overflow sets the other, with clipped counting as hidden, so overflow="hidden" overflowY="auto" clips sideways and scrolls down.

Property	Bulma Class	CSS Property
`overflow="clipped"`	`is-clipped`	`overflow: hidden`
`overflow="auto"` (also `clip`, `hidden`, `scroll`, `visible`)	`is-overflow-auto`	`overflow: auto`
`overflowX="auto"` (same keywords)	`is-overflow-x-auto`	`overflow-x: auto`
`overflowY="scroll"` (same keywords)	`is-overflow-y-scroll`	`overflow-y: scroll`

This is useful for preventing content from overflowing its container and creating clean, contained layouts.

Overflow Examples

import { Box, Content, Card } from '@allxsmith/bestax-bulma';

function OverflowExamples() {
  return (
    <Box p="4">
      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Without Overflow Control</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box
            bgColor="danger"
            textColor="white"
            p="3"
            style={{ height: '100px', width: '200px' }}
          >
            This content is much longer than the container and will overflow
            beyond the boundaries, creating a messy layout that extends outside
            the defined area.
          </Box>
        </Card.Content>
      </Card>

      <Card>
        <Card.Header>
          <Card.Header.Title>With Overflow Clipped</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box
            bgColor="success"
            textColor="white"
            p="3"
            overflow="clipped"
            style={{ height: '100px', width: '200px' }}
          >
            This content is much longer than the container but gets clipped
            cleanly at the boundaries, creating a neat and contained layout that
            doesn't extend outside the defined area.
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}

To scroll one axis instead, give the element a bounded height and set overflowY. Here an aspect ratio bounds it. A region that scrolls needs to be reachable from the keyboard, so the example gives it tabIndex={0}, a region role and a name.

<Box
  aspectRatio="3by1"
  overflowY="auto"
  tabIndex={0}
  role="region"
  aria-label="Scrolling list"
>
  {Array.from({ length: 20 }, (_, i) => (
    <Paragraph key={i}>Line {i + 1} of a list longer than the box.</Paragraph>
  ))}
</Box>

Border Radius

The radius helper either removes an element's border radius or sets one from Bulma's radius scale.

Property	Bulma Class	CSS Property
`radius="radiusless"`	`is-radiusless`	`border-radius: 0`
`radius="small"`	`has-radius-small`	`border-radius: var(--bulma-radius-small)`
`radius="normal"`	`has-radius-normal`	`border-radius: var(--bulma-radius)`
`radius="large"`	`has-radius-large`	`border-radius: var(--bulma-radius-large)`
`radius="rounded"`	`has-radius-rounded`	`border-radius: var(--bulma-radius-rounded)`, a pill

radiusless is particularly useful when you want to override default rounded corners on components like buttons, cards, or images. The class goes on the component's root element, so where an inner element draws the radius, such as the <img> inside Image, that element keeps its own. The sizes are not !important, unlike radiusless, so a component rule more specific than one class still wins: an isRounded control stays a pill, and a joined addon keeps its square inner corners.

Border Radius Examples

import { Box, Button, Card, Image, Tag } from '@allxsmith/bestax-bulma';

function BorderRadiusExamples() {
  return (
    <Box p="4">
      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Default Rounded Elements</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box display="flex" alignItems="center" flexWrap="wrap">
            <Button color="primary" mr="2" mb="2">
              Rounded Button
            </Button>
            <Box
              bgColor="info"
              textColor="white"
              p="3"
              mr="2"
              mb="2"
              radius="normal"
            >
              Rounded Box
            </Box>
            <Image
              src="https://bulma.io/assets/images/placeholders/128x128.png"
              alt="Rounded image"
              style={{ width: '64px', height: '64px', borderRadius: '8px' }}
            />
          </Box>
        </Card.Content>
      </Card>

      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Radius Sizes</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box display="flex" alignItems="center" flexWrap="wrap">
            <Tag color="primary" radius="small" mr="2" mb="2">
              small
            </Tag>
            <Tag color="primary" radius="normal" mr="2" mb="2">
              normal
            </Tag>
            <Tag color="primary" radius="large" mr="2" mb="2">
              large
            </Tag>
            <Tag color="primary" radius="rounded" mr="2" mb="2">
              rounded
            </Tag>
          </Box>
        </Card.Content>
      </Card>

      <Card>
        <Card.Header>
          <Card.Header.Title>Radiusless Elements</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box display="flex" alignItems="center" flexWrap="wrap">
            <Button color="primary" radius="radiusless" mr="2" mb="2">
              Square Button
            </Button>
            <Box
              bgColor="info"
              textColor="white"
              p="3"
              mr="2"
              mb="2"
              radius="radiusless"
            >
              Square Box
            </Box>
            <Image
              src="https://bulma.io/assets/images/placeholders/128x128.png"
              alt="Square image"
              radius="radiusless"
              style={{ width: '64px', height: '64px' }}
            />
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}

Shadow

The shadow helper removes any box shadow from an element, creating a flat appearance.

Property	Bulma Class	CSS Property
`shadow="shadowless"`	`is-shadowless`	`box-shadow: none`

This is useful when you want to remove default shadows from components like cards, buttons, or other elevated elements.

Shadow Examples

import { Box, Button, Card } from '@allxsmith/bestax-bulma';

function ShadowExamples() {
  return (
    <Box p="4">
      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Default Shadow Elements</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box display="flex" alignItems="center" flexWrap="wrap">
            <Card mr="3" mb="3" style={{ width: '200px' }}>
              <Card.Content>
                <Content>Card with shadow</Content>
              </Card.Content>
            </Card>

            <Box
              bgColor="white"
              p="3"
              style={{
                boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                border: '1px solid #e8e8e8',
              }}
            >
              Box with shadow
            </Box>
          </Box>
        </Card.Content>
      </Card>

      <Card>
        <Card.Header>
          <Card.Header.Title>Shadowless Elements</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box display="flex" alignItems="center" flexWrap="wrap">
            <Card
              shadow="shadowless"
              mr="3"
              mb="3"
              style={{
                width: '200px',
                border: '1px solid #e8e8e8',
              }}
            >
              <Card.Content>
                <Content>Card without shadow</Content>
              </Card.Content>
            </Card>

            <Box
              bgColor="white"
              p="3"
              shadow="shadowless"
              style={{ border: '1px solid #e8e8e8' }}
            >
              Box without shadow
            </Box>
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}

Interaction

The interaction helpers control user interaction behavior with elements, particularly text selection and cursor appearance.

Property	Bulma Class	CSS Property
`interaction="unselectable"`	`is-unselectable`	`user-select: none`
`interaction="clickable"`	`is-clickable`	`cursor: pointer !important`

These helpers are useful for improving user experience by preventing unwanted text selection or indicating clickable elements.

Interaction Examples

import { Box, Content, Card, Button } from '@allxsmith/bestax-bulma';

function InteractionExamples() {
  return (
    <Box p="4">
      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Unselectable Text</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content mb="3">
            Try to select the text below - the first paragraph is unselectable:
          </Content>

          <Box
            bgColor="info"
            textColor="white"
            p="3"
            mb="3"
            interaction="unselectable"
          >
            This text cannot be selected by the user. This is useful for UI
            elements, labels, or decorative text that shouldn't be copyable.
          </Box>

          <Box bgColor="light" p="3">
            This text can be selected normally. Users can highlight and copy
            this content as they would expect with regular text.
          </Box>
        </Card.Content>
      </Card>

      <Card>
        <Card.Header>
          <Card.Header.Title>Clickable Elements</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content mb="3">
            Hover over the elements below to see cursor changes:
          </Content>

          <Box display="flex" flexDirection="column" gap="2">
            <Box
              bgColor="primary"
              textColor="white"
              p="3"
              interaction="clickable"
              onClick={() => alert('Clicked!')}
            >
              This box shows a pointer cursor and is clickable
            </Box>

            <Box
              bgColor="success"
              textColor="white"
              p="3"
              interaction="clickable"
              textTransform="uppercase"
              onClick={() => alert('Also clicked!')}
            >
              This box is clickable with uppercase text
            </Box>

            <Box bgColor="light" p="3">
              This box shows the default cursor (not clickable)
            </Box>
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}

Cursor

The cursor prop sets the mouse cursor style. cursor="pointer" reuses Bulma's built-in is-clickable class; cursor="help" uses bestax's project-level is-cursor-help class to indicate a help/tooltip affordance.

Property	Bulma Class	CSS Property
`cursor="pointer"`	`is-clickable`	`cursor: pointer`
`cursor="help"`	`is-cursor-help`	`cursor: help`

Cursor Examples

import { Box } from '@allxsmith/bestax-bulma';

function CursorExamples() {
  return (
    <Box p="4">
      <Box cursor="pointer" bgColor="primary" textColor="white" p="3" mb="3">
        Cursor: pointer (is-clickable)
      </Box>
      <Box cursor="help" bgColor="info" textColor="white" p="3">
        Cursor: help (is-cursor-help)
      </Box>
    </Box>
  );
}

Responsive

The responsive prop applies Bulma's always-on responsive modifiers. These are primarily useful on layout components like Navbar and Columns that have viewport-dependent default behavior.

Property	Bulma Class	Typical Use
`responsive="mobile"`	`is-mobile`	Force mobile layout at all viewports (e.g. on `Columns`)
`responsive="narrow"`	`is-narrow`	Shrink a column to fit its content

Full Height

The fullHeight prop applies height: 100%, useful for making a child fill its positioned parent.

Property	Bulma Class	CSS Property
`fullHeight={true}`	`is-full-height`	`height: 100%`

Skeleton

The skeleton prop toggles Bulma's skeleton loading state on a component. See the skeleton examples in the useBulmaClasses API reference for per-component usage.

Property	Bulma Class	Effect
`skeleton={true}`	`is-skeleton`	Skeleton loading effect

Position

The pos prop sets CSS position. It is named pos because several components already have a position prop of their own, for where they place a popup or a toast. relative is the older shortcut for pos="relative" and still works; when both are set, pos wins.

Property	Bulma Class	CSS Property
`pos="absolute"`	`is-position-absolute`	`position: absolute`
`pos="fixed"`	`is-position-fixed`	`position: fixed`
`pos="relative"`	`is-position-relative`	`position: relative`
`pos="static"`	`is-position-static`	`position: static`
`pos="sticky"`	`is-position-sticky`	`position: sticky`
`relative={true}`	`is-relative`	`position: relative`

The helpers set position and nothing else, so an element that is absolute, fixed or sticky still takes its offsets (top, right, …) from your own CSS. A sticky element does nothing until it has one. Beside overlay, which sets the offsets to 0, see Overlay in the useBulmaClasses reference.

Position Examples

A relative container provides the positioning context for an absolutely positioned child:

import { Box, Content, Card } from '@allxsmith/bestax-bulma';

function PositionExamples() {
  return (
    <Box p="4">
      <Card>
        <Card.Header>
          <Card.Header.Title>Relative Positioning Context</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content mb="3">
            The relative positioned container provides a context for absolutely
            positioned children:
          </Content>

          <Box
            pos="relative"
            bgColor="light"
            p="4"
            style={{ height: '200px', border: '2px dashed #ccc' }}
          >
            <Content>This container has position: relative</Content>
            <Box
              pos="absolute"
              bgColor="danger"
              textColor="white"
              p="2"
              radius="small"
              style={{ top: '10px', right: '10px' }}
            >
              Absolutely positioned
            </Box>
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}

A sticky header stays at the top of its scrolling container while the rest scrolls under it. The container takes focus so a keyboard can scroll it:

<Box
  aspectRatio="3by1"
  overflowY="auto"
  p="0"
  tabIndex={0}
  role="region"
  aria-label="Rows under a sticky header"
>
  <Notification color="primary" pos="sticky" mb="0" style={{ top: 0 }}>
    Sticky header
  </Notification>
  {Array.from({ length: 20 }, (_, i) => (
    <Paragraph key={i} px="4">
      Row {i + 1}
    </Paragraph>
  ))}
</Box>

Aspect Ratio

The aspectRatio prop fixes an element's width-to-height ratio. The height follows the width, so leave the height unset.

Property	Bulma Class	CSS Property
`aspectRatio="1by1"`	`is-aspect-ratio-1by1`	`aspect-ratio: 1 / 1`
`aspectRatio="16by9"`	`is-aspect-ratio-16by9`	`aspect-ratio: 16 / 9`
`aspectRatio="9by16"` (portrait)	`is-aspect-ratio-9by16`	`aspect-ratio: 9 / 16`

The full set is 1by1, 5by4, 4by3, 3by2, 5by3, 16by9, 2by1, 3by1, 4by5, 3by4, 2by3, 3by5, 9by16, 1by2 and 1by3. Content taller than the ratio allows grows the element unless overflow or overflowY makes it scroll or clip. On Image, use its own size ratios instead, which also fit the picture to the box.

<Columns>
  <Column>
    <Notification color="primary" aspectRatio="1by1">
      1by1
    </Notification>
  </Column>
  <Column>
    <Notification color="info" aspectRatio="4by3">
      4by3
    </Notification>
  </Column>
  <Column>
    <Notification color="success" aspectRatio="16by9">
      16by9
    </Notification>
  </Column>
</Columns>

Combined Usage Example

Here's a practical example showing how multiple other helpers can work together to create a sophisticated component:

import {
  Box,
  Card,
  Title,
  Content,
  Button,
  Image,
} from '@allxsmith/bestax-bulma';

function CombinedHelpersExample() {
  return (
    <Box p="4">
      <Card>
        <Card.Header>
          <Card.Header.Title>
            Product Card with Multiple Helpers
          </Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box pos="relative" style={{ height: '300px' }}>
            {/* Product image */}
            <Image
              src="https://bulma.io/assets/images/placeholders/400x300.png"
              alt="Product"
              style={{
                width: '100%',
                height: '200px',
                objectFit: 'cover',
              }}
              radius="radiusless"
            />

            {/* Sale badge overlay */}
            <Box
              bgColor="danger"
              textColor="white"
              p="2"
              interaction="unselectable"
              pos="absolute"
              radius="small"
              style={{ top: '10px', right: '10px' }}
            >
              SALE
            </Box>

            {/* Product info */}
            <Box p="3" clearfix>
              <Title size="5" mb="2" interaction="unselectable">
                Premium Product
              </Title>

              <Content float="left" style={{ width: '60%' }} overflow="clipped">
                This is a detailed product description that might be quite long
                but will be clipped if it exceeds the container width.
              </Content>

              <Box float="right" textAlign="right">
                <Content mb="2" interaction="unselectable">
                  <strong>$99.99</strong>
                </Content>
                <Button
                  color="primary"
                  interaction="clickable"
                  shadow="shadowless"
                  radius="radiusless"
                >
                  Add to Cart
                </Button>
              </Box>
            </Box>
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}

Best Practices

Other Helpers Guidelines

Use sparingly: These helpers solve specific problems - don't overuse them
Combine thoughtfully: Many helpers work well together but consider the overall design
Consider accessibility: Some helpers like unselectable can impact accessibility
Test interactions: Always test clickable elements and overlays across different devices
Use semantic markup: Combine helpers with appropriate semantic HTML elements

Common Patterns

// Modal backdrop
<Box overlay={true} bgColor="dark" style={{ opacity: 0.5 }} />

// Clickable card
<Card interaction="clickable" onClick={handleClick}>
  <Card.Content interaction="unselectable">
    Non-selectable content
  </Card.Content>
</Card>

// Image gallery item with positioning
<Box relative>
  <Image src="..." radius="radiusless" />
  <Box overlay={true} interaction="clickable" onClick={openLightbox} />
</Box>

// Floating action button
<Button
  color="primary"
  radius="rounded"
  shadow="shadowless"
  pos="fixed"
  style={{ bottom: '20px', right: '20px' }}
>
  +
</Button>

// Layout with floated sidebar and clearfix
<Box clearfix>
  <Box float="left" style={{ width: '200px' }}>
    Sidebar content
  </Box>
  <Box style={{ marginLeft: '220px' }}>
    Main content area
  </Box>
</Box>

Learn More

For detailed API information about available helper properties, see the useBulmaClasses API documentation.

Float​

Float Examples​

Clearfix​

Clearfix Examples​

Overlay​

Overlay Examples​

Overflow​

Overflow Examples​

Border Radius​

Border Radius Examples​

Shadow​

Shadow Examples​

Interaction​

Interaction Examples​

Cursor​

Cursor Examples​

Responsive​

Full Height​

Skeleton​

Position​

Position Examples​

Aspect Ratio​

Combined Usage Example​

Best Practices​

Common Patterns​

See Also​