Bulma Columns Complete Reference

Columns in Bulma is useful to build the responsive column layout, along with defining the column size of each column individually which contains the different breakpoints for the various layouts. The various customization options for the columns can be performed by using the different CSS style properties. 

The list of complete reference for the Bulma Columns are given below:

Bulma Column Basics

Bulma columns can create columns for our web page. Columns are an essential part of any web page and generally, it can be difficult to create them as required.

Bulma Column Sizes

Bulma column size categories in three ways 12 columns system, Offset and Narrow columns. The below tables mention all categories briefly.

Components	Descriptions
Bulma 12 columns system	It provides us with a responsive grid system in which a container is divided into 12 columns.
Bulma Offset	Bulma The offset modifier of the Bulma framework is used for adding horizontal spacing with the use of custom class values like “.is-offset-8” or “.is-offset-one-fourth”.
Bulma Narrow column	Bulma narrow column is used to create a narrower column within Bulma’s grid system.

Bulma Responsiveness

Bulma handles different column layouts for each breakpoint. The below table mentiones that all categories of column responsiveness.

Components	Descriptions
BulmaMobile columns	This class is used to enforce columns and the level component to adopt a horizontal layout on mobile devices.
Bulma Different column sizes per breakpoint	This class is used to set different column sizes per breakpoint. The different breakpoints are mobile, tablet, desktop, widescreen, and fullhd.

Bulma Nesting

Bulma nesting could be done using columns and column classes there is no predefined call for that.

Bulma Gap

A Bulma Gap class is used to customize the gap between columns.

Components	Descriptions
Bulma Default gap	This class is used to set the default gap between columns which has a default value of 0.75rem, so this gap will be placed on both sides, so the adjacent gap will be 1.5rem.
Bulma Gapless	Bulma Gapless class is used to remove the space between the columns, add the is-gapless modifier on the columns container.
Bulma Variable gap	Bulma Variable Gap class is used to create a defined gap between columns, there are 9 modifiers of options in this class.
Bulma Breakpoint based column gaps	Bulma breakpoint-based column gaps class is used to define specific columns gap for each breakpoint.

Bulma Options

Bulma Options are used to design different types of column layouts. 

Components	Descriptions
BulmaVertical alignment option	It is used to align columns vertically, add the is-vcentered modifier to the columns container.
BulmaMultiline option	It is used to add more column elements in single row.
BulmaCentering columns option	It is used to align center a column element.