Skip to main content

Layout Components

This page summarizes all Bulma-styled layout components in Bestax, with a brief description, usage example, and links to full documentation for each. Use these components to structure your app with responsive, flexible, and visually consistent layouts.

Container​

A responsive layout wrapper for centering and constraining content. Supports fixed/fluid layouts, breakpoints, and color helpers.

<Container>
  <Notification color="primary">Content goes here.</Notification>
</Container>

View full documentation.

Hero​

A visually striking section for headers, banners, or landing areas. Supports color, size, fullheight, and composition with Hero.Head, Hero.Body, and Hero.Foot.

<Hero color="link">
  <Hero.Body>
    <Container>
      <Title>Hero title</Title>
      <SubTitle>Hero subtitle</SubTitle>
    </Container>
  </Hero.Body>
</Hero>

View full documentation.

A semantic, accessible site footer for copyright, links, or extra info. Supports color, background, and custom content.

<Footer bgColor="dark">
  <Content textAlign="centered">
    <p>Copyright © 2025 Bestax-Bulma</p>
  </Content>
</Footer>

View full documentation.

Level​

A flexible horizontal layout for aligning items left, right, or center. Use for toolbars, status bars, or summary sections. Includes Level.Left, Level.Right, and Level.Item subcomponents.

<Level>
  <Level.Left>
    <Level.Item>
      <SubTitle as="p" size="5">
        <strong>Stats</strong>
      </SubTitle>
    </Level.Item>
  </Level.Left>
  <Level.Right>
    <Level.Item>Right content</Level.Item>
  </Level.Right>
</Level>

View full documentation.

Section​

Provides vertical spacing and visual separation for large blocks of content. Supports size, color, and background helpers.

<Section>
  <Title>Section</Title>
  <SubTitle>Divide your content into sections.</SubTitle>
</Section>

View full documentation.

Media​

Implements Bulma’s media object layout for aligning images/icons with content and actions. Includes Media.Left, Media.Content, and Media.Right subcomponents.

<Media>
  <Media.Left>
    <Image src="/img/logo.svg" size="64x64" />
  </Media.Left>
  <Media.Content>
    <p>
      <strong>Bestax Bulma</strong> <small>@allxsmith/bestax</small>{' '}
      <small>TS</small>
      <br />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies
      nisi neque, eu accumsan dui tempus id. Nunc fringilla, est at tincidunt
      iaculis, diam dui aliquet magna, in imperdiet leo lorem eget augue.
      Pellentesque vel nisl non sem condimentum elementum non sed nibh. Donec
      venenatis a diam a tempor.
    </p>
  </Media.Content>
  <Media.Right>
    <Delete />
  </Media.Right>
</Media>

View full documentation.

Splitter​

Panes side by side or one above the other, like columns the reader resizes: a handle goes between each pair, to drag or move by keyboard, each named by its pane's label.

<Splitter height={160} className="box p-0">
  <Splitter.Pane label="Files" defaultSize={30} minSize="8rem">
    <Content p="4">
      <p>Files</p>
    </Content>
  </Splitter.Pane>
  <Splitter.Pane label="Editor">
    <Content p="4">
      <p>Editor</p>
    </Content>
  </Splitter.Pane>
</Splitter>

View full documentation.

For more details and advanced usage, see the full documentation for each component linked above.