Bulma Installation
Bulma is a CSS library that provides CSS classes and it is used with HTML to provide specific styles. Bulma installation process can be done either using the npm command or using hosted CDN links.
Bulma CSS library can be used inside the project in the following ways.
- Using NPM
- Using Hosted CDN
- Install Locally
Bulma CSS Installation Using NPM
Use the following given npm command to insert the Bulma framework inside the project.
npm install bulma
2. Bulma Installation Using Hosted CDN
You can also use hosted CDN link of the Bulma CSS library. Simply, you have to add the following URL in the head section using
<link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
General Syntax
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" />
</head>
3.Install Locally
Simply, you have to visit https://github.com/jgthms/bulma/tree/master/css download the Bulma CSS library, and add it inside the head section of the web page using <link>
General Syntax
<head>
<link rel="stylesheet" href="../code-support/library/css/bulma.min.css" />
</head>
Starter Template
You can quick start with Bulma CSS framework using starter template:
General Syntax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bulma CSS Starter Template</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" />
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
This is a Bulma CSS starter template.
</p>
</div>
</section>
</body>
</html>
Web Tutorials
