Bulma Starter Template
Last Updated :
09 Mar, 2022
Bulma is an open-source front-end development CSS framework that is getting more popular day by day. It is an amazing framework and acts as an alternative to the Bootstrap framework. Basic knowledge of CSS is more than enough in order to get started with this framework. Since Bulma is based on Flexbox, it is responsive in nature.
Bulma is a powerful framework and can produce some impressive results. It contains 40 .sass files (CSS extension) where every file handles different interface components. The best part about this framework is that it is simple and its syntax is very consistent in order to quickly grasp it.
We only need a single CSS file in order, to begin with, the Bulma framework. To start, we either need to install the pre-compiled . CSS file or install the .sass files. In the Bulma Starter template, we will understand how to create a simple page with some text at the top.
Please refer to the Bulma Introduction article for further details.
Example 1: This example demonstrates the Basic Bulma CSS Starter Template.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Starter Template</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<title>GFG Bulma starter template</title>
<link rel="stylesheet"
href=
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Hey GeeksforGeeks!
</h1>
<p class="subtitle">
This is my <strong>Bulma</strong> template
</p>
</div>
</section>
</body>
</html>
|
Output:
Bulma Starter template
Example 2: This example demonstrates the Basic Bulma CSS Starter Template.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Starter Template</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<title>GFG Bulma starter template</title>
<link rel="stylesheet"
href=
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
<p class="has-text-success">
GeeksforGeeks
</p>
</h1>
<p class="subtitle">
<strong>
GeeksforGeeks A Computer Science portal for geeks. <br>
It contains well written, well thought and well explained <br>
computer science and programming articles.
</strong>
</p>
</div>
</section>
</body>
</html>
|
Output:
Bulma Starter template
Reference: https://bulma.io/documentation/overview/start/#starter-template
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...