Date
Dec. 11th, 2024
 
2024年 11月 11日

Post: Bulma Cheatsheet

Bulma Cheatsheet

Published 08:08 Aug 02, 2020.

Created by @ezra. Categorized in #Programming, and tagged as #Cheatsheet.

Source format: Markdown

Table of Content

Bulma Cheatsheet

Installation

Bulma is a CSS file, you can include it with just basic css and html from a CDN source:

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

In order for bulma to work correctly you need these two (responsivness):

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

Modifiers

In Bulma you have a generic container class and a is-* modifier to that class. For example you can have a basic bulma button with:

<button class="button">
  Button
</button>

And now you can add a customization with :

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

Columns

Basics

Building a columns layout with Bulma is very simple: - 1 - Add a columns container - 2 - Add as many column elements as you want

Each column will have an equal width, no matter the number of columns.

<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>

Sizes

If you want to change the size of a single column, you can use one of the following classes: - is-three-quarters - is-two-thirds - is-half - is-one-third - is-one-quarter - is-full

<div class="columns">
  <div class="column is-four-fifths">is-four-fifths</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

or you can use 12 grid system: - is-1 - is-2 - is-3 - is-4 - is-5 - is-6 - is-7 - is-8 - is-9 - is-10 - is-11 - is-12

Gap

If you want to remove the space between the columns, add the is-gapless modifier on the columns container:

div class="columns is-gapless">
  <div class="column">
    No gap
  </div>
  <div class="column">
    No gap
  </div>
  <div class="column">
    No gap
  </div>
  <div class="column">
    No gap
  </div>
</div>

You can specify a custom column gap by appending one of 9 modifiers on the .columns container. - is-0 will remove any gap (similar to is-gapless) - is-3 is the default value, equivalent to the 0.75rem value - is-8 is the maximum gap of 2rem

Options

Pinned Message
HOTODOGO
The Founder and CEO of Infeca Technology.
Developer, Designer, Blogger.
Big fan of Apple, Love of colour.
Feel free to contact me.
反曲点科技创始人和首席执行官。
开发、设计与写作皆为所长。
热爱苹果、钟情色彩。
随时恭候 垂询