Bulma - Installation

This tutorial covers Bulma framework Installation with steps and examples..

Install Bulma css library

Like any other CSS library, Bulma provides number of ways to integrates into your applicaiton

  • CDN css link
  • Npm package
  • Local installation

Using npm bulma package

It has bulma package provided in npm library. You can use npm or yarn or bower packager to install into your applicaiton as follows

Go to your application root directory, please run the below command as per your package manager.

npm install bulma
or 
yarn add bulma
or 
bower install bulma

This will installs bulma module into your applicaion and made following changes

  • create a bulma folder under your node_modules folder
  • created an entry in package.json file
  "dependencies": {
    "bulma": "^0.8.0"
  }

~ tiled symbol indicates that minimum version consider as 0.8.0

import bulma.css library into applicaiton

It provides bulma.css file as main css file,once installation is done, import css file as follows

import 'bulma/css/bulma.css'

bulma.css is imported into your application and all your selectors and styles are avialable to use.

You can also use the bulma hosted in CDN provider. provide the CDN url like a normla stylesheet file.

If you need font-awesome library required, Please include font-awesome cdn url as given in the example.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bulma CDN Example</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs
      /bulma/0.8.0/css/bulma.min.css">
      <script defer src="https://cdnjs.cloudflare.com/ajax/libs
      /font-awesome/5.12.1/js/all.min.js"></script>
   </head>
   <body>
      <section class="section">
         <div class="container">
            <h1 class="title">
               Bulma CDN Example
            </h1>
            <p class="subtitle">
               My first website with <strong>Bulma</strong>!
            </p>
            <a class="button is-primary">Primary</a>
            <a class="button is-link">Link</a>
            <a class="button is-info">Info</a>
            <a class="button is-success">Success</a>
            <a class="button is-warning">Warning</a>
            <a class="button is-danger">Danger</a>     
         </div>
      </section>
   </body>
</html>

And after running the above code in browsers, The output looks like as follows.Bulma CDN Example

Bulma CDN Example

My first website with Bulma!

Primary Link Info Success Warning Danger

Local setup

To install in your local machine, Please download bulma css code from repository copy the styles or css folder wherever required.

Include the following relative link as per link path.

<link rel="stylesheet" href="css/bulma.min.css">