Bulma Tutorial Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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 (desktops, tablets, and mobiles).It is easy to read and write the code.It can be combined with any JavaScript framework (AngularJS, ReactJS).It is customizable and modularizable.It is a lightweight, modern CSS framework, which uses Flexbox.BulmaBulma Installation Steps: To install the Bulma using the following steps, first you need to install node.js. You can see the articles to install Node.js in Windows or Linux System.Using NPM:npm install bulmaUsing Yarn:yarn add bulmaUsing Bower:bower install bulmaAfter installation of Bulma, import the CSS file into your project using the following code snippet:@import 'bulma/css/bulma.css'CDN Link: Without installing the Bulma, you can directly run the Bulma code using Bulma CDN link. Add this link inside the head section of the code. <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css'>Now let's understand the working of it using an example.Example: The below example illustrates the text transformation class. HTML <!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b>Bulma Text transformation</b> <br> <div class="container"> <p class="is-capitalized is-size-4"> geeksforGeeks </p> <p class="is-lowercase is-size-4"> GeeksforGeeks </p> <p class="is-uppercase is-size-4"> GeeksforGeeks </p> <p class="is-italic is-size-4"> GeeksforGeeks </p> <p class="is-underlined is-size-4"> GeeksforGeeks </p> </div> </body> </html> Output:Bulma Complete References:Bulma Columns Complete ReferenceBulma Elements Complete ReferenceBulma Components Complete ReferenceBulma Form Complete ReferenceBulma Layout Complete Reference Comment More infoAdvertise with us Next Article Bulma Introduction D dharmendra_kumar Follow Improve Article Tags : Web Technologies CSS Bulma 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