Responsiveness

This guide covers how Bestax components handle responsive design. Bestax extends Bulma with React components and additional UI on top of Bulma's CSS, so the responsive props and breakpoints you'll see here inherit directly from Bulma — you just drive them through Bestax's typed React API.

Test Responsive Behavior

Try resizing your browser window or using the responsive design mode in your browser's developer tools to see the responsive behavior in action. The live examples below demonstrate different behaviors across breakpoints: mobile (up to 768px), tablet (769px+), desktop (1024px+), widescreen (1216px+), and fullhd (1408px+).

Component Display Behavior

Many Bestax components inherit Bulma's mobile-first behavior, stacking vertically or going block-level by default on smaller screens so content stays accessible and readable.

Vertical Components

These components automatically stack vertically on mobile:

• Columns: Individual columns stack vertically on mobile unless isMobile is specified
• Level: Level items stack vertically on mobile unless isMobile prop is used
• Navbar: Navbar items collapse into a burger menu on mobile

<>
  <p>These will stack on mobile by default</p>
  <Columns>
    <Column>
      <Notification color="primary">First column</Notification>
    </Column>
    <Column>
      <Notification color="info">Second column</Notification>
    </Column>
    <Column>
      <Notification color="success">Third column</Notification>
    </Column>
  </Columns>

  <Level>
    <LevelLeft>
      <LevelItem>Left content</LevelItem>
    </LevelLeft>
    <LevelRight>
      <LevelItem>Right content</LevelItem>
    </LevelRight>
  </Level>
</>

Mobile Override

Use the isMobile property to maintain horizontal layout even on mobile devices:

<>
  <p>Force horizontal layout on mobile</p>
  <Columns isMobile>
    <Column>
      <Notification color="warning">Always</Notification>
    </Column>
    <Column>
      <Notification color="danger">Horizontal</Notification>
    </Column>
  </Columns>

  <Level isMobile>
    <LevelLeft>
      <LevelItem>Left</LevelItem>
    </LevelLeft>
    <LevelRight>
      <LevelItem>Right</LevelItem>
    </LevelRight>
  </Level>
</>

Breakpoints

Bestax uses Bulma's 4 breakpoints to define 5 screen sizes:

Size	Range	CSS Variable
mobile	up to 768px	--tablet: 769px
tablet	from 769px	--desktop: 1024px
desktop	from 1024px	--widescreen: 1216px
widescreen	from 1216px	--fullhd: 1408px
fullhd	from 1408px	(no upper limit)

These breakpoints drive every responsive prop and helper class across Bestax.

Container Responsiveness

The Container component provides responsive width constraints and breakpoint support:

Breakpoint Properties

<>
  <p>Standard container - centered on desktop+</p>
  <Container>
    <Notification color="primary">Responsive container content</Notification>
  </Container>

  <p>Tablet breakpoint - full width until tablet</p>
  <Container breakpoint="tablet">
    <Notification color="info">
      Full width on mobile, constrained on tablet+
    </Notification>
  </Container>

  <p>Desktop breakpoint - full width until desktop</p>
  <Container breakpoint="desktop">
    <Notification color="success">Full width until desktop</Notification>
  </Container>

  <p>Widescreen breakpoint - full width until widescreen</p>
  <Container breakpoint="widescreen">
    <Notification color="warning">Full width until widescreen</Notification>
  </Container>
</>

Maximum Width Constraints

Use isMax with breakpoints to limit container width:

<>
  <p>Maximum tablet width</p>
  <Container breakpoint="tablet" isMax>
    <Notification color="danger">
      Container width limited to tablet size minus container offset
    </Notification>
  </Container>

  <p>Maximum desktop width</p>
  <Container breakpoint="desktop" isMax>
    <Notification color="primary">
      Container width limited to desktop size minus container offset
    </Notification>
  </Container>

  <p>Maximum widescreen width</p>
  <Container breakpoint="widescreen" isMax>
    <Notification color="info">
      Container width limited to widescreen size minus container offset
    </Notification>
  </Container>
</>

Fluid Containers

Fluid containers expand to full width with consistent padding:

<>
  <p>Full width with 32px padding on each side</p>
  <Container fluid>
    <Notification color="success">
      Full width container with small gaps on each side
    </Notification>
  </Container>
</>

Widescreen and FullHD Options

Control when containers become constrained:

<>
  <p>Full width until widescreen breakpoint</p>
  <Container widescreen>
    <Notification color="warning">
      Expands until widescreen (1216px)
    </Notification>
  </Container>

  <p>Full width until fullhd breakpoint</p>
  <Container fullhd>
    <Notification color="danger">Expands until fullhd (1408px)</Notification>
  </Container>
</>

Responsive Helper Classes

The viewport prop scopes a helper to a single breakpoint. It applies to typography and display helpers (textAlign, textSize, display, visibility); Bestax's spacing helpers (m, p, …) mirror Bulma's and don't have responsive variants, so viewport is a no-op on them.

Text Alignment

<>
  <p>Different text alignment per breakpoint</p>
  <Box textAlign="left" viewport="mobile">
    Left aligned on mobile
  </Box>

  <Box textAlign="centered" viewport="tablet">
    Centered on tablet and up
  </Box>
</>

Spacing

Bestax inherits Bulma's spacing system, which applies uniformly across breakpoints — there are no mTablet / pDesktop variants. To vary whitespace responsively, wrap content in breakpoint-aware containers or toggle display / visibility per viewport.

<>
  <p>Uniform padding and margin at every breakpoint</p>
  <Box m="4" p="5">
    Same spacing on mobile, tablet, desktop, widescreen, and fullhd
  </Box>
</>

Display Properties

<>
  <p>Hide on mobile, show on desktop</p>
  <Box visibility="hidden" viewport="mobile">
    Hidden on mobile
  </Box>

  <p>Flex layout only on tablet+</p>
  <Box display="flex" viewport="tablet" justifyContent="space-between">
    <span>Flex layout on tablet+</span>
    <span>Space between items</span>
  </Box>
</>

Typography

Text size and alignment have dedicated per-viewport props — combine a base value with any *Mobile / *Tablet / *Desktop / *Widescreen / *Fullhd override.

<>
  <p>Responsive text sizes</p>
  <Title textSize="6" textSizeDesktop="3">
    Grows on desktop
  </Title>

  <Box textAlign="centered" textAlignDesktop="left">
    Centered on mobile/tablet, left-aligned on desktop
  </Box>
</>

Column System Responsiveness

The column system is highly responsive with size controls per breakpoint:

Basic Responsive Columns

<Columns>
  <Column
    size="full" // Full width on mobile
    sizeTablet="half" // Half width on tablet
    sizeDesktop="one-third" // One third on desktop
  >
    <Notification color="primary">Responsive column</Notification>
  </Column>
  <Column size="full" sizeTablet="half" sizeDesktop="two-thirds">
    <Notification color="info">Complementary column</Notification>
  </Column>
</Columns>

Column Offsets

<Columns>
  <Column
    size="half"
    offset="one-quarter" // Offset on all sizes
    offsetTablet="0" // No offset on tablet+
  >
    <Notification color="warning">Responsive offset column</Notification>
  </Column>
</Columns>

Narrow Columns

<Columns>
  <Column
    isNarrow // Content-sized on all
    isNarrowTablet={false} // Full-width on tablet
  >
    <Notification color="success">Conditionally narrow</Notification>
  </Column>
  <Column>
    <Notification color="danger">Flexible column</Notification>
  </Column>
</Columns>

Grid System Responsiveness

The CSS Grid system provides modern responsive layout:

Responsive Column Counts

<Grid
  isFixed
  fixedCols={2} // 2 columns by default
  fixedColsTablet={3} // 3 columns on tablet
  fixedColsDesktop={4} // 4 columns on desktop
  fixedColsWidescreen={5} // 5 columns on widescreen
  fixedColsFullhd={6} // 6 columns on fullhd
>
  {[...Array(12)].map((_, i) => (
    <Cell key={i}>
      <Notification>Cell {i + 1}</Notification>
    </Cell>
  ))}
</Grid>

Smart Grid with Minimum Columns

<>
  <p>Automatically responsive based on min column width</p>
  <Grid minCol={4}>
    {[...Array(20)].map((_, i) => (
      <Cell key={i}>
        <Notification>{i + 1}</Notification>
      </Cell>
    ))}
  </Grid>
</>

Best Practices

Mobile-First Approach

Always design for mobile first, then enhance for larger screens:

<>
  <p>Good: Mobile-first responsive design</p>
  <Box
    p="3"
    textAlign="centered" // Centered on mobile
    textAlignDesktop="left" // Left-aligned on desktop
  >
    <Title
      textSize="5" // Smaller on mobile
      textSizeDesktop="3" // Larger on desktop
    >
      Responsive Title
    </Title>
    <Button size="small">Small Button</Button>
  </Box>
</>

Test Across Breakpoints

Always test your layouts across all breakpoints.

Use browser dev tools to test these breakpoints:

• 375px (mobile)
• 768px (tablet boundary)
• 1024px (desktop boundary)
• 1216px (widescreen boundary)
• 1408px (fullhd boundary)

Combine Techniques

Combine different responsive approaches for complex layouts:

<Container breakpoint="desktop" isMax>
  <Columns isMobile>
    <Column isNarrow isNarrowTablet={false} display="flex">
      <Box p="3" textAlign="centered" textAlignTablet="left">
        <Title textSize="5" textSizeTablet="4">
          Sidebar
        </Title>
      </Box>
    </Column>
    <Column>
      <Grid gap={2}>
        {[...Array(9)].map((_, i) => (
          <Cell key={i}>
            <Notification>Card {i + 1}</Notification>
          </Cell>
        ))}
      </Grid>
    </Column>
  </Columns>
</Container>

This creates a sophisticated responsive layout that adapts elegantly across all screen sizes while maintaining usability and visual hierarchy.