Skip to main content

Container

Overview​

The Container component provides a responsive and flexible layout wrapper for your Bulma React UI. It supports all Bulma container features, including fixed and fluid layouts, different breakpoints, widescreen/fullhd options, and helper props for colors, spacing, and more. It is typically used to center and constrain content horizontally within your page.

tip

Use Container to ensure your content maintains consistent margins and maximum width across different devices and breakpoints.

Import​

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

Props​

PropTypeDefaultDescription
fluidbooleanfalseMakes the container full-width with a 32px gap on each side.
widescreenbooleanfalseMakes the container full-width until the widescreen breakpoint.
fullhdbooleanfalseMakes the container full-width until the fullhd breakpoint.
breakpoint'tablet' | 'desktop' | 'widescreen'—Responsive breakpoint for container (is-tablet, is-desktop, is-widescreen).
isMaxbooleanfalseUses Bulma's is-max-* class for the specified breakpoint, limiting max width.
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'—Bulma color modifier for text.
textColor'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'black-bis' | 'black-ter' | 'grey-darker' | 'grey-dark' | 'grey' | 'grey-light' | 'grey-lighter' | 'white' | 'light' | 'dark' | 'inherit' | 'current'—Text color helper.
bgColor'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'black-bis' | 'black-ter' | 'grey-darker' | 'grey-dark' | 'grey' | 'grey-light' | 'grey-lighter' | 'white' | 'light' | 'dark' | 'inherit' | 'current'—Background color helper.
classNamestring—Additional CSS classes.
childrenReact.ReactNode—Content inside the container.
...All standard <div> and Bulma helper props(See Helper Props)

Usage​

Default Container​

<Container>
  <Notification color="primary">
    By default the container is <strong>centered</strong> on desktop viewports
    and up.
  </Notification>
</Container>

Widescreen Container​

<Container widescreen>
  <Notification color="primary">
    If <code>breakpoint="widescreen"</code> the container is{' '}
    <strong>fullwidth</strong> <em>until</em> the <code>widescreen</code>{' '}
    breakpoint.
  </Notification>
</Container>

FullHD Container​

<Container fullhd>
  <Notification color="primary">
    If <code>breakpoint="fullhd"</code> the container is{' '}
    <strong>fullwidth</strong> <em>until</em> the <code>fullhd</code>{' '}
    breakpoint.
  </Notification>
</Container>

Max Tablet Width​

<Container breakpoint="tablet" isMax>
  <Notification color="primary">
    If the container has <code>breakpoint="tablet"</code> and <code>isMax</code>{' '}
    then the container will have a <code>max-width</code> of{' '}
    <code>tablet - container offset</code>.
  </Notification>
</Container>

Max Width Desktop​

<Container breakpoint="desktop" isMax>
  <Notification color="primary">
    If the container has <code>breakpoint="desktop"</code> and{' '}
    <code>isMax</code> then the container will have a <code>max-width</code> of{' '}
    <code>desktop - container offset</code>.
  </Notification>
</Container>

Max Width Widescreen​

<Container breakpoint="widescreen" isMax>
  <Notification color="primary">
    If the container has <code>breakpoint="widescreen"</code> and{' '}
    <code>isMax</code> then the container will have a <code>max-width</code> of{' '}
    <code>widescreen - container offset</code>.
  </Notification>
</Container>

Fluid Container​

<Container fluid>
  <Notification color="primary">
    If the container has <code>fluid</code> it will expand to the full width of
    the screen, with a small 32px gap on each side.
  </Notification>
</Container>

Accessibility​

  • The container renders as a semantic <div> by default.
  • Use semantic HTML and accessible children within the container for best practices.
  • Notification: Useful for demonstrating container layouts.
  • Helper Props: List of all supported Bulma helper props for spacing, colors, etc.

Additional Resources​

Pro Tip

You can use all Bulma helper props with <Container /> for powerful utility-based styling.