Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
No CSS knowledge required!
<divdata-theme="dark"><h1class="title">Bulma</h1><pclass="subtitle"> Modern CSS framework based on<ahref="https://bulma.io">Flexbox</a></p><divclass="message is-success"><divclass="message-body"> Changes successfully saved</div></div><divclass="field"><inputclass="input"type="text"placeholder="Your Name"></div><divclass="field"><divclass="select"><select><option>Select dropdown</option></select></div></div><divclass="buttons"><aclass="button is-link is-soft">Save Changes</a><aclass="button is-danger is-soft">Cancel</a></div></div>Better on desktop
This interactive tool works better on larger screens! That's because Bulma columns arevertical by default. I recommend revisiting this page later when you're on desktop. 😉
1
2
3
4
5
6
7
8
9
10
11
12
<divclass="columns"><divclass="column">1</div><divclass="column">2</div><divclass="column">3</div><divclass="column">4</div><divclass="column">5</div></div> While it's possible to add as many columns as you want, it is recommended to stick with12 columns.
If you want smaller divisions, you can alwaysnest columns.
@use"sass:color";// Set your brand colors$purple:#8a4d76;$pink:#fa7c91;$brown:#757763;$beige-light:#d0d1cd;$beige-lighter:#eff0eb;// Path to Bulma's sass folder@use"path/to/bulma/sass"with($family-primary:'"Nunito", sans-serif',$grey-dark:$brown,$grey-light:$beige-light,$primary:$purple,$link:$pink,$control-border-width:2px,$input-h:color.hue($beige-lighter),$input-s:color.saturation($beige-lighter),$input-background-l:color.lightness($beige-lighter),$input-border-l:color.lightness($beige-lighter),$input-shadow:none);// Import the Google Font@importurl("https://fonts.googleapis.com/css?family=Nunito:400,700");
