Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Modularity

Improve Article
Save Article
  • Last Updated : 17 Mar, 2022
Improve Article
Save Article

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, we can just import the below code into your mystyles.scss file:

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/elements/button.sass"

Once we import the files, we can use the .button class, and all its modifiers as shown below.

Syntax:

// Add below files in mystyles.scss file
@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/grid/columns.sass"

// Add below code in index.html in <body> tag.
<button class="button">
  Button
</button>

Note: Make sure to link the mystyles.css file in your HTML file. You will notice how does the mystyles.css file created, this can be achieved by using Bulma with node-sass. Now, below we have two examples demonstrated with two different examples.

Example 1: The below example illustrates the Bulma modularity in which the Bulma columns are created.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href="css/mystyles.css" />
</head>
  
<body>
    <div class="container">
        <h1 class="title">GeeksforGeeks</h1>
        <h1 class="subtitle">Bulma Modularity</h1>
  
        <div class="columns">
            <div class="column has-background-primary">
              GFG Col 1
            </div>
            <div class="column has-background-warning">
              GFG Col 2
            </div>
            <div class="column has-background-danger">
              GFG Col 3
            </div>
            <div class="column has-background-success">
              GFG Col 4
            </div>
            <div class="column has-background-link">
              GFG Col 5
            </div>
        </div>
    </div>
</body>
  
</html>


CSS




@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
@import "bulma/sass/grid/columns.sass"


Output:

Bulma Modularity

Bulma Modularity

Example 2: The below example illustrates the Bulma modularity in which the Bulma buttons are created.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet"
          href="css/mystyles.css" />
</head>
  
<body>
    <div class="container">
        <h1 class="title">GeeksforGeeks</h1>
        <h1 class="subtitle">Bulma Modularity</h1>
  
        <button class="button">
            Log In
        </button>
  
        <button class="button is-primary">
            Sign Up
        </button>
  
        <button class="button is-success">
            Add
        </button>
  
        <button class="button is-danger">
            Delete
        </button>
    </div>
</body>
  
</html>


CSS




@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
@import "bulma/sass/elements/button.sass"


Output:

Bulma Modularity

Bulma Modularity

Reference: https://bulma.io/documentation/overview/modular


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!