Install Bulma CSS library

Like any other CSS library, Bulma provides many ways to integrate into your application.

  • CDN CSS link
  • Npm package
  • Local installation

Using npm Bulma package

It has a Bulma package provided in the npm library. You can use npm or yarn or bower packager to install into your application 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

It installs the Bulma module into your application and makes the following changes.

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

~ tiled symbol indicates that the minimum version consider as 0.8.0

import bulma.css library into the application

It provides bulma.css file as the main CSS file, once the installation is done, imports the CSS file as follows.

import 'bulma/css/bulma.css'

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

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

If you need a font-awesome library required, Please include a 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 the link path.

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