Questions tagged [bulma]

Bulma is a free, open source CSS framework based on Flexbox and used by more than 200,000 developers.

Bulma is a CSS framework based on Flexbox and used by more than 200,000 developers.

Features

  • 100% responsive designed to be mobile first

  • Modular only requiring developers to import only the what's needed

  • Modern built with Flexbox

  • Full customization by setting SASS variables before importing

  • No JavaScript required - CSS only integrating into any JS enviroment

  • Free with a large open source community. Available on GitHub

Resources

Bulma-Start is a tiny npm package that includes the npm dependencies you need to build your own website with Bulma.

The documentation has everything you need to create a website with Bulma.

939 questions
59
votes
7 answers

After installing bulma through NPM, how can I refer it in my project

I have pulled in bulma in my project through : $ npm install bulma After that, how can I refer to it in my pages. I really don't know how to work with npm, so please can you guide me. Do I have to refer to it in my js by saying: import bulma…
TheBAST
  • 2,680
  • 10
  • 40
  • 68
41
votes
5 answers

How to vertically center elements in Bulma?

How can I vertically center this
to that red colored section which is enclosing it? And should I remove or add some classes here to improve this code? Please suggest me. Thanks! I am new to CSS framework, never…
Ajit
  • 875
  • 1
  • 10
  • 20
39
votes
2 answers

How can I make a bulma button goes full width?

I am using bulma@0.3.0 css framework I have submit button within a form as follows ...
38
votes
3 answers

Bulma: How do you center a button in a box?

Dazzle
  • 2,880
  • 3
  • 25
  • 52
35
votes
5 answers

Center image in Bulma

Is there a way to horizontally centered an image inside a card? I have the following
Sig
  • 5,476
  • 10
  • 49
  • 89
28
votes
3 answers

How to make tiles wrap with Bulma CSS

I'm using the Bulma CSS framework with a Rails app. I have a long list of items and would like to display them in tiles. However, the tiles run off the screen instead of wrapping to the next line. The Bulma Documentation doesn't address this issue.…
martin-martin
  • 3,274
  • 1
  • 33
  • 60
27
votes
12 answers

I'm trying to use hamburger menu on bulma css, but it doesn't work. What is wrong?

I'm new on bulma css http://bulma.io/ I'm trying to use hamburger menu for mobile user. I just followed instruction on this page: http://bulma.io/documentation/components/nav/ But it doesn't work. What should I add ? Actually, I can see hamburger…
moge
  • 273
  • 1
  • 3
  • 6
23
votes
6 answers

How to set column height equal to longest column in Bulma (flexbox)?

I'm using Bulma 0.4.0, though the answer may not be associated with Bulma itself. How can I set column height equal to others? (see screenshots below) Edit: codepen with more text that presents actual behavior:…
curious
  • 791
  • 2
  • 12
  • 27
21
votes
2 answers

Bulma: Change stack order of columns

How can I change the stack order of columns on mobile or tablet? For example, the code below shows elements horizontally on wide screens, but when it's shrinked I want 2 to be on top. I don't want to change the html structure to do it. The example…
shigg
  • 792
  • 1
  • 8
  • 24
20
votes
2 answers

Bulma icon not showing up?

I am trying to use bulma icons following the docs here, but the icon doesn't show up:
Psidom
  • 209,562
  • 33
  • 339
  • 356
17
votes
5 answers

Bulma dropdown not working

Bulma dropdown doesn't seem to toggle on click. Below is the code snippet from the documentation:https://bulma.io/documentation/components/dropdown/
Aakash Thakur
  • 3,837
  • 10
  • 33
  • 64
16
votes
1 answer

Bulma - why all columns are on one line?

I use Bulma with VueJS when I use v-for, all columns are on one line, I tried to addis-4, then the column width changes but they are still on one line
Mateusz Kawka
  • 422
  • 1
  • 4
  • 16
14
votes
2 answers

How to set base font sizes in Bulma CSS for responsive design

Going through the Bulma.io documentation, I cannot find how to set the base font-size for the responsive design. As per this section on setting initial variables, we can set the initial value of classes $size-1 etc. However, I am wanting to set the…
Kayote
  • 14,579
  • 25
  • 85
  • 144
14
votes
3 answers

Center content in bulma column

I have multiple columns. Each column contains a circle in the CSS within a font awesome icon centered in it. Now I wanna make align the circle itself in the middle of the column. However, it keeps staying on the left while the text itself gets…
niko
  • 153
  • 1
  • 2
  • 5
12
votes
4 answers

Bulma Navbar breakpoint

I am using the Bulma framework for a project and the mobile menu is activated for max-width 1024px. I would like to have the mobile menu only activated when screen width is 769px or below. I have spent hours digging through the sass files and can't…
aviattor
  • 191
  • 1
  • 2
  • 4
1
2 3
62 63