New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

Getting started

You only need 1 CSS file to use Bulma


There are several ways to get started with Bulma. You can either:

  1. use npm to install the Bulma package
  2. use the cdnjs CDN to link to the Bulma stylesheet
  3. use the GitHub repository to get the latest development version

1

Use NPM (recommended):

npm install bulma

Font Awesome icons

If you want to use icons with Bulma, don't forget to include Font Awesome:

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

Code requirements #

For Bulma to work correctly, you need to make your webpage responsive.

1

Use the HTML5 doctype

<!DOCTYPE html>

2

Add the responsive viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Starter template #

If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer.

<!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
</div>
</section>
</body>
</html>

Made with Bulma
This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Sponsors

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!