Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Starter Template

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 09 Mar, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!