Bulma is an open source flexbox based css framework. Bulma is fully responsive and 100% free of cost. It is developed by Jeremy Thomas. Flexbox is new layout mode in css3 for different screen sizes and devices.
There are a lot of css frameworks available at that time around the web like Twitter Bootstrap , foundation, Gumby, UI KIT etc.
Bulma is a css only framework and there is no javascript included.

Why Bulma ?

Bulma has provide a range of great features as i described below

  • Responsive
    Fully responsive and mobile first css framework.
  • Modular
    It is bult with Sass so you need only import the features to use into your project
  • Good Range of Features
    It has a range of features like Form, Model, Tabs, Alignment, card and tons of more.
  • Looking Beautiful
    Bulma is rich in the sense of feature and all the features are looking very beautiful whether are Buttons, Tabs, Cards, Forms, Breadcrumbs or more others.
  • Simple Documentation
    The Documentation is very clear and simple
  • Based on flexbox
    Flexbox is in the foundation of Bulma

Bulma Installation

As i said the documentation is very clean and clear. Follow the few simple below given steps to install the Bulma.

Bulma install with npm

Type the following command in your command terminal

Use the CDN Link

Download From Github Repository

Basic Code Requirements

  1. Use HTML5 Doctype

    <!DOCTYPE html>

  2. Add responsive viewport meta tag

    <meta name="viewport" content="width=device-width, initial-scale=1">

    Starter template

Now start with the features of Bulma.

Grid Columns

To create responsive columns with Bulma You need to create a container named columns and then create as many columns element as you want.

 

Bulma Columns

 

Buttons

You can create a button using the button class which looks fine

Codeigniter 4 New release

Form Controls

Itprovide a variety of built in form elements. The input fields looks very fine with icons

 

Bulma Form

Conclusion

Guys Bulma is very good modern open source css freamework and it provides built in structure .you can check full framework from official website . You can read full documentation which is very well organized, simple,clean and clear. Everything you want you learn from here about Bulma. I hope it looks you fine and very helpful.

I hope this article will help you to make a basic understanding about Bulma and keep visiting our blog.