Skip to main content

Cell

Overview​

The Cell component provides a single Bulma grid cell for use inside the Grid component. It supports all Bulma grid CSS classes for manual placement and spanning, color/background helpers, and all utility/HTML props. Use Cell to control column/row start, end, and span within modern CSS grid layouts.

Import​

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

Props​

PropTypeDescription
colStartnumberWhich column the cell starts at (Bulma: is-col-start-x).
colFromEndnumberWhich column the cell ends at, counting from the end (Bulma: is-col-from-end-x).
colSpannumberHow many columns the cell will span (Bulma: is-col-span-x).
rowStartnumberWhich row the cell starts at (Bulma: is-row-start-x).
rowFromEndnumberWhich row the cell ends at, counting from the end (Bulma: is-row-from-end-x).
rowSpannumberHow many rows the cell will span (Bulma: is-row-span-x).
classNamestringAdditional CSS class names.
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.
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'Bulma color modifier for the cell.
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.
childrenReact.ReactNodeContent to render inside the cell.
...All Bulma helper and HTML props(See Helper Props)

Usage​

Basic Usage​

<Grid>
  <Cell>
    <Notification color="primary">Basic Cell</Notification>
  </Cell>
  <Cell>
    <Notification color="info">Another Cell</Notification>
  </Cell>
</Grid>

Column Start​

<Grid isFixed fixedCols={4}>
  <Cell>
    <Notification>Cell 1</Notification>
  </Cell>
  <Cell colStart={3}>
    <Notification color="primary">Cell 2</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 3</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 4</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 5</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 6</Notification>
  </Cell>
</Grid>

Column From End​

<Grid isFixed fixedCols={4}>
  <Cell>
    <Notification>Cell 1</Notification>
  </Cell>
  <Cell colFromEnd={2}>
    <Notification color="primary">Cell 2</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 3</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 4</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 5</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 6</Notification>
  </Cell>
</Grid>

Column Span​

<Grid isFixed fixedCols={4}>
  <Cell>
    <Notification>Cell 1</Notification>
  </Cell>
  <Cell colSpan={2}>
    <Notification color="primary">Cell 2</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 3</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 4</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 5</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 6</Notification>
  </Cell>
</Grid>

Row Start​

<Grid isFixed fixedCols={4}>
  <Cell>
    <Notification>Cell 1</Notification>
  </Cell>
  <Cell rowStart={3}>
    <Notification color="primary">Cell 2</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 3</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 4</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 5</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 6</Notification>
  </Cell>
</Grid>

Row Span​

<Grid isFixed fixedCols={4}>
  <Cell>
    <Notification>Cell 1</Notification>
  </Cell>
  <Cell rowSpan={2}>
    <Notification color="primary" style={{ height: '100%' }}>
      Cell 2
    </Notification>
  </Cell>
  <Cell>
    <Notification>Cell 3</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 4</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 5</Notification>
  </Cell>
  <Cell>
    <Notification>Cell 6</Notification>
  </Cell>
</Grid>

Notes​

  • Use Cell inside a Grid for proper Bulma grid layout.
  • You can combine all placement and span props for advanced grid arrangements.
  • All Bulma utility helper props and HTML <div> props are supported.

See Also​