📅 You're Invited: Meet the Socket team at RSAC (April 28 – May 1).RSVP
Socket
Sign inDemoInstall
Socket

bulma

Package Overview
Dependencies
Maintainers
1
Versions
65
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bulma

Modern CSS framework based on Flexbox

1.0.4
latest
Source
npm
Version published
Weekly downloads
183K
-3.53%
Maintainers
1
Weekly downloads
 
Created

What is bulma?

Bulma is a modern CSS framework based on Flexbox. It provides a set of responsive, mobile-first components that are easy to use and customize. Bulma is known for its simplicity and ease of use, making it a popular choice for developers looking to quickly build responsive web interfaces.

What are bulma's main functionalities?

Grid System

Bulma's grid system is based on Flexbox, allowing for easy creation of responsive layouts. The 'columns' class creates a flex container, and each 'column' class creates a flex item.

<div class="columns">
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
  <div class="column">Fourth column</div>
</div>

Navigation Bar

Bulma provides a responsive navigation bar component that can be easily customized. The 'navbar' class creates the navigation bar, and 'navbar-item' is used for individual items within the bar.

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="/">
        Home
      </a>
      <a class="navbar-item" href="/">
        Documentation
      </a>
    </div>
  </div>
</nav>

Cards

Bulma's card component is a flexible and extensible content container. It includes options for images, media, and various content sections.

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-4">John Smith</p>
        <p class="subtitle is-6">@johnsmith</p>
      </div>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
      <a>@bulmaio</a>.
      <a href="#">#css</a> <a href="#">#responsive</a>
      <br>
      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
    </div>
  </div>
</div>

Other packages similar to bulma

Keywords

css

FAQs

Package last updated on 19 Apr 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts