Column
Interfaces
ColumnProps
Props for the Column component.
Extends
HTMLAttributes<HTMLDivElement>.Omit<BulmaClassesProps,"color"|"backgroundColor">
Properties
| Property | Type | Description | Overrides |
|---|---|---|---|
alignContent? | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | Align content (e.g., 'center', 'stretch'). | - |
alignItems? | "flex-start" | "flex-end" | "center" | "start" | "end" | "stretch" | "baseline" | Align items (e.g., 'center', 'flex-start'). | - |
alignSelf? | "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | Align self (e.g., 'auto', 'center'). | - |
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 (Bulma color, 'inherit', or 'current'). | - |
children? | ReactNode | Children to render inside the column. | React.HTMLAttributes.children |
className? | string | Additional CSS classes to apply. | React.HTMLAttributes.className |
color? | "primary" | "link" | "info" | "success" | "warning" | "danger" | Bulma color modifier for the column. | React.HTMLAttributes.color |
colorShade? | "00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "invert" | Color shade suffix (e.g., '00', 'invert'). | - |
display? | "block" | "flex" | "inline" | "inline-block" | "inline-flex" | Display type (e.g., 'block', 'flex'). | - |
flexDirection? | "row" | "row-reverse" | "column" | "column-reverse" | Flex direction (e.g., 'row', 'column'). | - |
flexGrow? | "0" | "1" | Flex grow value (e.g., '0', '1'). | - |
flexShrink? | "0" | "1" | Flex shrink value (e.g., '0', '1'). | - |
flexWrap? | "nowrap" | "wrap" | "wrap-reverse" | Flex wrap (e.g., 'wrap', 'nowrap'). | - |
float? | "left" | "right" | Float direction (e.g., 'left', 'right'). | - |
fontFamily? | "primary" | "sans-serif" | "monospace" | "secondary" | "code" | Font family (e.g., 'sans-serif', 'code'). | - |
interaction? | "unselectable" | "clickable" | Interaction behavior (e.g., 'unselectable', 'clickable'). | - |
isNarrow? | boolean | The column is narrow. | - |
isNarrowDesktop? | boolean | The column is narrow on desktop. | - |
isNarrowFullhd? | boolean | The column is narrow on fullhd. | - |
isNarrowMobile? | boolean | The column is narrow on mobile. | - |
isNarrowTablet? | boolean | The column is narrow on tablet. | - |
isNarrowTouch? | boolean | The column is narrow on touch devices. | - |
isNarrowWidescreen? | boolean | The column is narrow on widescreen. | - |
justifyContent? | "left" | "right" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end" | Justify content (e.g., 'center', 'space-between'). | - |
m? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin (e.g., '0', '1'). | - |
mb? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin bottom. | - |
ml? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin left. | - |
mr? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin right. | - |
mt? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin top. | - |
mx? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin horizontal (left and right). | - |
my? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin vertical (top and bottom). | - |
offset? | BulmaColumnSize | Column offset. | - |
offsetDesktop? | BulmaColumnSize | Desktop column offset. | - |
offsetFullhd? | BulmaColumnSize | FullHD column offset. | - |
offsetMobile? | BulmaColumnSize | Mobile column offset. | - |
offsetTablet? | BulmaColumnSize | Tablet column offset. | - |
offsetWidescreen? | BulmaColumnSize | Widescreen column offset. | - |
overflow? | "clipped" | Overflow behavior (e.g., 'clipped'). | - |
overlay? | boolean | Applies overlay styling if true. | - |
p? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding (e.g., '0', '1'). | - |
pb? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding bottom. | - |
pl? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding left. | - |
pr? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding right. | - |
pt? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding top. | - |
px? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding horizontal (left and right). | - |
py? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding vertical (top and bottom). | - |
radius? | "radiusless" | Border radius style (e.g., 'radiusless'). | - |
responsive? | "mobile" | "narrow" | Responsive behavior (e.g., 'mobile', 'narrow'). | - |
shadow? | "shadowless" | Shadow style (e.g., 'shadowless'). | - |
size? | BulmaColumnSize | Column size. | - |
sizeDesktop? | BulmaColumnSize | Desktop column size. | - |
sizeFullhd? | BulmaColumnSize | FullHD column size. | - |
sizeMobile? | BulmaColumnSize | Mobile column size. | - |
sizeTablet? | BulmaColumnSize | Tablet column size. | - |
sizeWidescreen? | BulmaColumnSize | Widescreen column size. | - |
textAlign? | "centered" | "justified" | "left" | "right" | Text alignment (e.g., 'centered', 'left'). | - |
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 (Bulma color, 'inherit', or 'current'). | - |
textSize? | "1" | "2" | "3" | "4" | "5" | "6" | "7" | Text size (e.g., '1', '2'). | - |
textTransform? | "capitalized" | "lowercase" | "uppercase" | "italic" | Text transformation (e.g., 'uppercase', 'italic'). | - |
textWeight? | "light" | "normal" | "medium" | "semibold" | "bold" | Text weight (e.g., 'light', 'bold'). | - |
viewport? | "mobile" | "tablet" | "desktop" | "widescreen" | "fullhd" | Viewport for responsive classes (e.g., 'mobile', 'desktop'). | - |
visibility? | "hidden" | "sr-only" | Visibility (e.g., 'hidden', 'sr-only'). | - |
Type Aliases
BulmaColumnSize
BulmaColumnSize =
number|"full"|"half"|"one-third"|"two-thirds"|"one-quarter"|"three-quarters"|"one-fifth"|"two-fifths"|"three-fifths"|"four-fifths"
Possible values for Bulma column size.
Functions
Column()
Column(
props,deprecatedLegacyContext?):ReactNode
Bulma Column component for responsive grid layouts.
Parameters
props
Props for the Column component.
deprecatedLegacyContext?
any
Deprecated
See
Returns
ReactNode
The rendered column.