Skip to main content

Bulma CSS Framework

Bulma is a free, open-source CSS framework based on Flexbox. It offers a clean, easy-to-use, and responsive design for modern websites. In this tutorial, we'll cover the basics of using Bulma, including its components and layout options.

Getting Started with Bulma​

First, include the Bulma CSS file in your HTML file by adding the following link within the <head> tag:

HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />

Now, let's create a simple container with Bulma:

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bulma Tutorial</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
  </head>
  <body>
    <section class="section">
      <div class="container">
        <h1 class="title">Hello, Bulma!</h1>
      </div>
    </section>
  </body>
</html>

Bulma Components​

Bulma offers various components, such as buttons, forms, cards, and more. Let's create a simple button using Bulma classes:

HTML
<button class="button is-primary">Primary Button</button>

You can customize the button's color, size, and state using Bulma's modifier classes. For example, to create a large, rounded, and disabled button, use the following code:

HTML
<button class="button is-large is-rounded is-danger is-disabled">Disabled Button</button>

Bulma Layout​

Bulma uses a 12-column grid system for its layout, and it's effortless to create responsive designs. Let's create a simple three-column layout using Bulma:

HTML
<div class="columns">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

You can also create responsive layouts using modifier classes like is-4 to specify the column width:

HTML
<div class="columns">
  <div class="column is-4">Column 1 (4/12 width)</div>
  <div class="column">Column 2 (auto width)</div>
  <div class="column is-2">Column 3 (2/12 width)</div>
</div>

Conclusion​

In this tutorial, we've covered the basics of using the Bulma CSS framework. With its components, layout options, and utility classes, you can create responsive, modern, and elegant websites with ease. Bulma offers a lightweight and straightforward solution for web development, allowing you to build professional-looking websites without writing extensive CSS code. Keep exploring the various features and components that Bulma has to offer to enhance your web projects further.