Bulma Modularity

Last Updated : 07 Mar, 2024

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:

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 Responsiveness Vertical by default

tarunsinghwap7

Improve

Article Tags :

Bulma Modularity

Similar Reads

Bulma Components

Bulma Columns

Thank You!

What kind of Experience do you want to share?