Bulma-start Introduction

Last Updated : 07 Jun, 2023

Bulma-start is a tiny package for Bulma that provides basic HTML structure and predefined CSS files. Basically, it includes all the necessary files and folders, i.e., all the required dependencies that need to be installed with the help of npm, in order to start building websites using Bulma. In simple words, Bulma-start is a starting point for beginners who want to learn Bulma and start building websites.

Features of Bulma-start:

Predefined development environment
Easy to learn
Modular design

Steps to getting started with bulma-start:

Step 1: Run the following command on the command line to install Bulma-start

npm install bulma-start

Step 2: Now type the following command to install node.js packages and dependencies

npm install

Step 3: Again type this command on the terminal to run watchers

npm start

Project structure: The following project structure will be generated after completing the above process:

Step 4: Now, make the changes inside the project to manipulate the output webpage.

We will utilize the above approach to illustrate the topic properly with the help of basic examples.

Example 1: In this example, we will create a navbar using Bulma.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          Centered Container with Bulma 
      </title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"> 
</head> 
  
<body> 
  
    <nav class="navbar is-primary" 
         role="navigation" 
         aria-label="main navigation"> 
        <div class="navbar-brand"> 
  
  
            <a role="button" class="navbar-burger" 
               aria-label="menu" 
               aria-expanded="false"
               data-target="navbarBasicExample"> 
                <span aria-hidden="true"></span> 
                <span aria-hidden="true"></span> 
                <span aria-hidden="true"></span> 
            </a> 
        </div> 
  
        <div id="navbarBasicExample" 
             class="navbar-menu"> 
            <div class="navbar-start"> 
                <a class="navbar-item"> 
                    Home 
                </a> 
                <a class="navbar-item"> 
                    Geeks 
                </a> 
            </div> 
  
            <div class="navbar-end"> 
                <div class="navbar-item"></div> 
            </div> 
        </div> 
    </nav> 
</body> 
  
</html>

Output:

Example 2: In this example, we will be creating a centered container with Bulma.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          Centered Container with Bulma 
      </title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"> 
</head> 
  
<body> 
  
    <div class="container is-centered is-max-desktop"> 
        <div class="columns is-centered"> 
            <div class="column is-half"> 
                <h2 class="title is-1 has-text-centered"> 
                    Centered Container 
                </h2> 
                <p class="has-text-centered"> 
                    example of how to create a 
                    centered container with Bulma 
                </p> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>