Bulma - Getting started with Bulma

Description

You can start with the Bulma by using one css file and can be manipulated by using one of the following ways −

Install the Bulma framework by using the Node Package Manager (NPM) package manager.
Link the Bulma stylesheet by using the Content Delivery Network (CDN).
Download the Bulma from the Github repository to use the latest development version.

Using NPM

Install Bulma framework by using below npm command −

npm install bulma

Using CDN

You can use the below CDN to link Bulma stylesheet −

https://cdnjs.com/libraries/bulma

Using GitHub Repository

Download the Bulma from below Github repository −

https://github.com/jgthms/bulma/tree/master/css

Example

The following example demonstrates creating of simple HTML starter template −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      
      <!--responsive viewport meta tag-->
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title> Bulma Example</title>
      
      <!--Bulma CSS CDN-->
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      
      <!--To make use of Font Awesome icons-->
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Hello World...Welcome to Tutorialspoint!!!
            </span>
         </div>
      </section>
  </body>
</html>

Save the above code in the HTML file and open it in a browser. It will display the output as shown below −

bulma_overview.htm