Bulma CSS Installation
Getting started with Bulma is straightforward. You can choose from multiple installation methods depending on your project requirements and development workflow.
Method 1: CDN (Quick Start)
The fastest way to use Bulma is via CDN. Add this to your HTML head:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bulma CSS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
</head>
<body>
<h1 class="title">Hello Bulma!</h1>
</body>
</html>Method 2: NPM/Yarn
For projects using package managers:
Install with NPM
npm install bulma
Install with Yarn
yarn add bulma
Import in your project
// In your main CSS file @import 'bulma/css/bulma.css';
Method 3: Sass (Recommended)
For full customization using Sass:
Install Sass and Bulma
npm install sass bulma
Create your main Sass file
// styles.scss // Import Bulma initial variables @import "bulma/sass/utilities/initial-variables"; @import "bulma/sass/utilities/functions"; // Customize variables $primary: #00d1b2; $family-sans-serif: "Nunito", sans-serif; // Import the rest of Bulma @import "bulma";
Method 4: GitHub
Clone directly from GitHub:
git clone https://github.com/jgthms/bulma.git cd bulma npm install npm run dev
Framework Integration
React with Bulma
// Install Bulma
npm install bulma
// Import in your main component
import 'bulma/css/bulma.css';
// Use in your components
function App() {
return (
<div className="container">
<button className="button is-primary">Bulma Button</button>
</div>
);
}Vue with Bulma
// Install Bulma
npm install bulma
// Import in main.js
import 'bulma/css/bulma.css';
// Use in Vue components
<template>
<div class="container">
<button class="button is-primary">Bulma Button</button>
</div>
</template>Verifying Installation
Test if Bulma is working correctly:
<div class="container"> <button class="button is-primary">Primary</button> <button class="button is-link">Link</button> <button class="button is-info">Info</button> <button class="button is-success">Success</button> <button class="button is-warning">Warning</button> <button class="button is-danger">Danger</button> </div>
Troubleshooting
Common Issues:
- Styles not loading: Check import paths
- Sass compilation errors: Ensure Sass is installed
- CDN not working: Check internet connection
Up next: Understanding Bulma Modularity
