Open In App
Related Articles

Bulma Starter Template

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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

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

Bulma Starter template

Reference: https://bulma.io/documentation/overview/start/#starter-template



Last Updated : 09 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads