Bulma Columns Complete Reference Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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 BasicsBulma 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 SizesBulma 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 systemIt provides us with a responsive grid system in which a container is divided into 12 columns. Bulma OffsetBulma 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 ResponsivenessBulma handles different column layouts for each breakpoint. The below table mentiones that all categories of column responsiveness. Components Descriptions BulmaMobile columnsThis class is used to enforce columns and the level component to adopt a horizontal layout on mobile devices. Bulma Different column sizes per breakpointThis class is used to set different column sizes per breakpoint. The different breakpoints are mobile, tablet, desktop, widescreen, and fullhd. Bulma NestingBulma nesting could be done using columns and column classes there is no predefined call for that. Bulma GapA Bulma Gap class is used to customize the gap between columns. Components Descriptions Bulma Default gapThis 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 GaplessBulma Gapless class is used to remove the space between the columns, add the is-gapless modifier on the columns container. Bulma Variable gapBulma 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 gapsBulma breakpoint-based column gaps class is used to define specific columns gap for each breakpoint. Bulma OptionsBulma Options are used to design different types of column layouts. Components Descriptions BulmaVertical alignment optionIt is used to align columns vertically, add the is-vcentered modifier to the columns container. BulmaMultiline optionIt is used to add more column elements in single row. BulmaCentering columns optionIt is used to align center a column element. Comment More infoAdvertise with us B bijaybhaskar Follow Improve Article Tags : Web Technologies CSS Bulma Bulma-Columns Similar Reads Bulma Tutorial Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive and minimizes the use of media queries for responsive behavior.BulmaWhy Bulma?It is easy to learn.It is used to create responsive design for all devices (des 2 min read Bulma Introduction Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior. Another advantage with Bulma is that you simply need to have an understanding of HTML and CSS t 3 min read Bulma Starter Template Bulma is an open-source front-end development CSS framework that is getting more popular day by day. It is an amazing framework and acts as an alternative to the Bootstrap framework. Basic knowledge of CSS is more than enough in order to get started with this framework. Since Bulma is based on Flexb 2 min read Bulma Modifiers Syntax Modifiers in Bulma are used to manipulate a particular class in order to get the desired output. To implement the modifiers, one has to either use the is- or the has- modifier class before the modifier name. It is essential to know the syntax of these modifiers in order to implement them in our code 2 min read Bulma Modularity In this article, we will learn about Bulma Modularity. Bulma consists of 39 .sass files to modify the HTML elements according to different requirements. Now, these files can be used anytime and just by importing the files you need. Let's say we just need to use Bulma sass button files, so for that, 2 min read Bulma Responsiveness Vertical by default Bulma is a component-rich, mobile-first CSS framework based on flexbox. Since it is a mobile-first framework, by default the columns are stacked vertically on top of each other, the children of the level component are also shown vertically on mobile devices and the navigation menu is also hidden on 2 min read Bulma Colors The Bulma colors classes are used to set the color of the text and background. If you want to design your text or any specific content then this class is so useful. All the color classes are mentioned and described below. Bulma Colors Class: All the below mentioned classes can be used to color text 4 min read Bulma Overview Complete Reference Bulma is a free, open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior. It allows us to add our own CSS styling but it is advised to use an external stylesheet ov 1 min read Bulma ComponentsBulma | CardBulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. A Card is a flexible component that can be composed of the content needed. It includes several other comp 5 min read Bulma | DropdownBulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The dropdown component is a container for a dropdown button and a dropdown menu. Using dropdown and its s 5 min read Bulma MenuBulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The Bulma framework provides the menu component that can be used as a type of vertical navigation. This 2 min read Bulma | MessageBulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The Message component in Bulma provides colored box type placeholders to emphasize certain parts of the p 7 min read Bulma | ModalBulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The Modal is a classic overlay in which one can include any content. The Modal component is a dialog box/ 5 min read Bulma NavbarBulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior. In this article, we will be seeing Bulma Navbar. A navbar is a very significant component of an 3 min read Bulma | PaginationBulma is a FLexbox based open-source CSS framework and its completely free. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The 'pagination' is a component used to indicate the existence of a series of related content 6 min read Bulma | PanelBulma is a responsive open-source framework for CSS based on Flexbox and its completely free. The main features of this framework are, it is very compatible, well documented, and rich in components. For design purposes, Bulma uses classes. The panel element is simply a container for compact controls 5 min read Bulma | TabsBulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. Tabs in Bulma are simple responsive horizontal navigation tabs with different styles. They require the fo 6 min read Bulma Components Complete ReferenceBulma Components contain various classes that are used to build the different portions of the web application which includes the Breadcrumb component that improves the navigation experience, card component that can be used to add details. Several such components are helpful to building an attractive 6 min read Bulma ColumnsBulma SizeBulma size is used to set your website's content font size, there are 7 different sizes class in Bulma. You can use any of them to define the size of your context. Size classes: is-size-1: The size of this class is pre defined which is font-size of 3rem.is-size-2: The size of this class is pre defin 1 min read Bulma Responsiveness Vertical by defaultBulma is a component-rich, mobile-first CSS framework based on flexbox. Since it is a mobile-first framework, by default the columns are stacked vertically on top of each other, the children of the level component are also shown vertically on mobile devices and the navigation menu is also hidden on 2 min read Bulma NestingIn this article, we'll be seeing about nesting in Bulma. Nesting is allowed in the Bulma framework as it provides the flexibility to use columns within another column for responsiveness in the column. Bulma Nesting Class: The nesting in Bulma can be done using columns and column classes there no pre 1 min read Bulma GapThe Bulma Gap class is used to customize the gap between columns, there are lots of classes to create gaps between columns by using Bulma. It is the alternative to the CSS gap property. Bulma Gap Class: Bulma Default gap: This class is used to set the default gap between columns which has a default 2 min read Bulma Columns Complete ReferenceColumns 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 prop 3 min read Like