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. |
Contact Us