Getting started
You only need 1 CSS file to use Bulma
There are several ways to get started with Bulma. You can either:
- use npm to install the Bulma package
- use the cdnjs CDN to link to the Bulma stylesheet
- use the GitHub repository to get the latest development version
1 Use NPM (recommended):
$ npm install bulma2 Use the cdnjs CDN
3 Download from the repository
https://github.com/jgthms/bulma/tree/master/css
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.
Use the HTML5 doctype
<!DOCTYPE html>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://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.1/css/bulma.min.css">
</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>Modifiers syntax
Most Bulma elements have alternative styles. To apply them, you only need to append one of the modifier classes.
They all start with is- or has-.
For more options: https://bulma.io/
0 Comments