Getting Started With Bulma

29/7/2020 Getting started with Bulma | Bulma: Free, open source, and modern CSS framework based on Flexbox
Bulma
On this 0.9.0 is out! With RTL support and spacing helpers.
page Release notes – Download it now
Code requirements
Starter template
bulma-start
Home / Documentation / Overview / Start
Back to top
Getting started with Bulma

You only need 1 CSS file to use Bulma
Limited time offer: Get
10 free Adobe Stock
images.
ads via Carbon
Start CSS classes Modifiers syntax Modularity Responsiveness Colors
Functions Mixins
There are several ways to get started with Bulma. You can either:
1. use npm to install the Bulma package

2. use the jsDelivr CDN to link to the Bulma stylesheet
3. use the GitHub repository to get the latest development version
1 Use NPM (recommended):

Copy
npm install bulma
2 Use the jsDelivr CDN

https://www.jsdelivr.com/package/npm/bulma
3 Download from the repository

https://github.com/jgthms/bulma/tree/master/css
https://bulma.io/documentation/overview/start/ 1/7
On this page
Font Awesome icons
Code requirements
Starter template
If you want to use icons with Bulma, don't forget to include Font Awesome 5:
bulma-start
Copy
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js">
Back to top
</script>
Code requirements
For Bulma to work correctly, you need to make your webpage responsive.
1 Use the HTML5 doctype

Copy
<!DOCTYPE html>
2 Add the responsive viewport meta tag

Copy
<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.
EX AMPLE
Copy
<!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://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
</head>
<body>
On this page
<section class="section">
Code requirements
<div class="container">
Starter template<h1 class="title">
Hello World
bulma-start </h1>
<p class="subtitle">
Back to top
My first website with <strong>Bulma</strong>!
</p>
</div>
</section>
</body>
</html>
bulma-start
bulma-start is a tiny npm package that includes the npm dependencies you need to build your own
website with Bulma.
Check it out
CSS classes →
This page is open source. Noticed a typo? Or something unclear?

Improve this page on GitHub
Overview
Start
CSS classes
Modifiers syntax
Modularity
Responsiveness
Colors
Functions
Mixins
On this page
Customize
Code requirements
Helpers New!
Starter template
Columns
bulma-start
Layout
Back to top
Form
Elements
Components
My CSS ebook
Buy now →
Support Bulma 😃
One-time donation Visit our Sponsors Monthly donation
Sponsor
On this page
Code requirements
Starter template New! The official Bulma
bulma-start
book! 😲
Back to top by Jeremy Thomas, creator of Bulma, Oleksii
Potiekhin,
Mikko Lauhakari, Aslam Shah and David
Berning
A step-by-step guide that teaches

you how to build a web interface
from scratch using Bulma.
Formats available: PDF Epub Mobi or
Kindle
PDF + Epub + Mobi Kindle version
Buy from Buy from
Or download a free sample !
Newsletter
Features, releases, email address Subscribe
showcase… stay in the loop!
On this page
Bulma
Code by Jeremy
requirements Contribute on GitHub Share on social media
Thomas.
Starter template Star 40,610 Tweet
bulma-start
Follow @jgthms 11.7K followers
Follow @jgthms Like Share
Back to top
Source code licensed MIT.
Website content licensed CC
BY-NC-SA 4.0
Coming from Expo Love

Bootstrap See what you can Fans of Bulma
An alternative to build with Bulma
Bootstrap
Home Documentation More

Overview Expo Official Bulma showcase
Blog Customize Love Fans of Bulma around the world
Light/Dark colors, Helpers Patreon and Everyone who is

better look, larger GitHub Backers supporting Bulma
Columns
controls
Blog Stay updated with new features
Layout
Automatic variables
Form Made with The official community
docs
Bulma badge
Migrating to v0.7.0 Elements
Coming from See how Bulma is an
Website redesign Components Bootstrap alternative to Bootstrap
View all posts Bulma Side projects to enhance

On this page extensions Bulma
Code requirements Bulma A tiny npm package to get

Starter template start started
bulma-start
Back to top

Getting Started With Bulma - Bulma - Free, Open Source, and Modern CSS Framework Based On Flexbox

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Getting Started With Bulma - Bulma - Free, Open Source, and Modern CSS Framework Based On Flexbox

Uploaded by

Copyright:

Available Formats

29/7/2020 Getting started with Bulma | Bulma: Free, open source, and modern CSS framework based on Flexbox

ads via Carbon

Start CSS classes Modiﬁers syntax Modularity Responsiveness Colors

1. use npm to install the Bulma package

1 Use NPM (recommended):

2 Use the jsDelivr CDN

3 Download from the repository

1 Use the HTML5 doctype

2 Add the responsive viewport meta tag

This page is open source. Noticed a typo? Or something unclear?

One-time donation Visit our Sponsors Monthly donation

A step-by-step guide that teaches

Formats available: PDF Epub Mobi or

PDF + Epub + Mobi Kindle version

Buy from Buy from

Or download a free sample !

Coming from Expo Love

Home Documentation More

Blog Customize Love Fans of Bulma around the world

Light/Dark colors, Helpers Patreon and Everyone who is

View all posts Bulma Side projects to enhance

Code requirements Bulma A tiny npm package to get

You might also like