November 2, 2017

Bulma Installation

Bulma Installation Steps– It is very simple to install Bulma Css. There are many ways to install Bulma css. Here in this tutorial, we are going to explain the installation steps. You can also use starter template to start quickly.

Bulma Installation Steps

You can get started with Bulma Css using the one of following method-

1. Using Npm

Using Npm you can install Bulma Package simply as below-

Install Bulma Npm command

npm install bulma

2. Using Hosted CDN

You can also use hosted CDN to include Bulma css. Add the following url in head to include Bulma css.

Bulma CSS CDN Url:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">

3. Install Locally

If you want to install Bulma locally just download files from https://github.com/jgthms/bulma/tree/master/css and include in head.

If you want to use the icons with Bulma please include font-awesome.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Quick Start

You can start with Bulma using the starter template-

Bulma Quick Start Template:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Welcome to Bulma!
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

Bulma Installation