Bulma Introduction

Last Updated : 12 Jul, 2025

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.

Bulma Interlocution

Another advantage with Bulma is that you simply need to have an understanding of HTML and CSS to implement this framework (Although knowing JavaScript can help the existing features according to your needs). Bulma also allows us to add our own CSS styling but it is advised to use an external stylesheet over inline styling.

Using Bulma: If you are a beginner web developer the simplest way is to use a jsDelivr CDN link within the head section of HTML file using link tag.

CDN Link:

https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css

Another cool feature with Bulma is that it can simply import the SASS files you need for the particular elements on which you want to apply the Bulma styling. For example, if you want the Bulma styling for the form elements you can import only that sass file. Otherwise, you can install the Bulma package with npm.

Example: The Bulma syntax is extremely simple, there are predefined class names that help us to create elements according to the name.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>

<body>
    <center>
        <strong class="has-text-success">
            GeeksforGeeks
        </strong>
        
        <br>
        <a class="button">Button</a>
    </center>
</body>

</html>

Output: The button created is not like the generic HTML button and the GeeksforGeeks text has the color of Bulma Color class.

Example: Each Bulma element has multiple alternative styles available, and these can be applied by using is- or has- class modifiers.

html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport"
         content="width=device-width, initial-scale=1">
   <title>Hello Bulma!</title>
   <link rel="stylesheet"
         href=
"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
   <center>
       <a class="button is-large">Hello</a>
       <a class="button is-medium">Hello</a>
       <a class="button is-small">Hello</a>
   </center>
</body>
</html>

Output:

These modifiers form the basis for manipulating objects in Bulma. Some of the color modifiers that Bulma provides are:

is-primary
is-info
is-success
is-danger
is-warning

The size modifiers ranging from is-size-1 to is-size-6. This helps in changing the font size. Try using h1 to h6 tags in Bulma, but you will notice that there is no change in the visible font size. This is because Bulma only uses the modifiers to change the size of the text and not in the standard HTML way. Try running this code to understand how h1 to h6 tags do not impact the size of the text.

Example 1:

html

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,
                   initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
 </head>
 
<body>
    <h1>hello world</h1>
    <h2>hello world</h2>
    <h3>hello world</h3>
</body>

</html>

Output:

hello world
hello world
hello world

Example 2: Add multiple variations within the element class attribute. Try this code and observe that we have used two modifiers one for the color and the second one for the size.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, 
                initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>

<body>
    <a class="button is-primary is-large">Hello</a>
    <a class="button is-primary is-medium">Hello</a>
    <a class="button is-primary is-small">Hello</a>
</body>

</html>