+ Blog launched, new responsive columns, new helpers
+
+
+
+
First blog post on the newly launched blog! It even has its own RSS feed for those who still use that. This blog will be more frequently updated than the newsletter, so you can subscribe to either or both, as they will be used for different purposes.
+
+
Columns on mobile too
+
+
By default, columns are only activated on tablet and desktop. If you want to use columns on mobile too, add the is-mobile modifier on the columns container.
+ If you use mobile modifiers on single column elements, make sure to use the is-mobile modifier on the columns container.
+
+
+
+
Multiline columns
+
+
By default, if you want to start a new row, you just need to close a columns container and open a new one.
+
+
But you can also add the is-multilinemodifier on the columns container, and use column size modifiers (like is-half or is-3) to define size on multiple rows within the same container.
While modifiers are specific to each Bulma element, helpers are general utility classes that can be applied on almost any element. Check out the new helpers documentation!
Have you ever wanted to build a Metro-UI-like grid in CSS?
+Thanks to Flexbox and the new Bulma tiles, you now can! And it only requires 1 HTML element: the tile element.
TL;DR: there’s a new .field container, and .control has been re-purposed.
+
+
Since the beginning, the .control has been a very versatile element that allowed:
+
+
+
to space controls vertically
+
to include an icon alongside inputs, buttons, textareas…
+
to append a loading spinner
+
to create horizontal forms
+
to create control addons
+
to create control groups
+
+
+
The problem
+
+
The .control element acted as both a block container (for spacing, for other controls in a horizontal form), but also an inline container (for adding an icon, a loader, an addon, and grouping).
+It led to issues where you couldn’t:
+
+
+
add a help text horizontally
+
add multiple icons or loaders in a group of controls
+
add a different icon on addons
+
+
+
The solution
+
+
The new .field element becomes the block container for .control elements. As a result, it inherits the .has-addons, .is-grouped, and .is-horizontal modifiers.
+
+
Furthermore .control element can only contain a .button, .input, .select, or .textarea, and eventually a .icon. It can no longer contain a .help element or other .control.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/versions/0.4.4/LICENSE b/docs/versions/0.4.4/LICENSE
new file mode 100644
index 00000000..e51b32b7
--- /dev/null
+++ b/docs/versions/0.4.4/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Jeremy Thomas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/docs/versions/0.4.4/README.md b/docs/versions/0.4.4/README.md
new file mode 100644
index 00000000..5fe0de24
--- /dev/null
+++ b/docs/versions/0.4.4/README.md
@@ -0,0 +1,19 @@
+## Building the documentation
+
+The documentation HTML is produced with the Ruby-based `jekyll` tool.
+
+1. Make sure Ruby 2.x is installed.
+2. `gem install jekyll`
+
+## Viewing the documentation locally
+
+Then to view the documentation in your local checkout:
+
+1. Before you begin, cd into `docs/` directory, and `cp _config.yml _config.local.yml`. Then edit `_config.local.yml` and change the `url:` value to `http://localhost:4000`. This local config file will be ignored by git.
+1. In a separate shell session, `cd` to the `docs/` directory, and do:
+```
+jekyll serve --incremental --config _config.local.yml
+```
+This will start an HTTP server at `http://localhost:4000/` that serves the docs built in the `_site` directory; and anytime the docs are rebuilt by you, it will serve the docs site on the fly.
+2. In your main shell session where you develop, if you change anything in `docs/` the jekyll server will rebuild those on the fly. But if you change anything about the Bulma SASS or CSS, you need to do `npm run start-docs` to build the docs' CSS before you will see it in the browser. The process running `jekyll serve` will pick up the new CSS automatically.
+
diff --git a/docs/versions/0.4.4/blog/index.html b/docs/versions/0.4.4/blog/index.html
new file mode 100644
index 00000000..f3b5e169
--- /dev/null
+++ b/docs/versions/0.4.4/blog/index.html
@@ -0,0 +1,804 @@
+
+
+
+
+
+
+
+
+ Bulma v0.4.4: a modern CSS framework based on Flexbox
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
TL;DR: there’s a new .field container, and .control has been re-purposed.
+
+
Since the beginning, the .control has been a very versatile element that allowed:
+
+
+
to space controls vertically
+
to include an icon alongside inputs, buttons, textareas…
+
to append a loading spinner
+
to create horizontal forms
+
to create control addons
+
to create control groups
+
+
+
The problem
+
+
The .control element acted as both a block container (for spacing, for other controls in a horizontal form), but also an inline container (for adding an icon, a loader, an addon, and grouping).
+It led to issues where you couldn’t:
+
+
+
add a help text horizontally
+
add multiple icons or loaders in a group of controls
+
add a different icon on addons
+
+
+
The solution
+
+
The new .field element becomes the block container for .control elements. As a result, it inherits the .has-addons, .is-grouped, and .is-horizontal modifiers.
+
+
Furthermore .control element can only contain a .button, .input, .select, or .textarea, and eventually a .icon. It can no longer contain a .help element or other .control.
Have you ever wanted to build a Metro-UI-like grid in CSS?
+Thanks to Flexbox and the new Bulma tiles, you now can! And it only requires 1 HTML element: the tile element.
First blog post on the newly launched blog! It even has its own RSS feed for those who still use that. This blog will be more frequently updated than the newsletter, so you can subscribe to either or both, as they will be used for different purposes.
+
+
Columns on mobile too
+
+
By default, columns are only activated on tablet and desktop. If you want to use columns on mobile too, add the is-mobile modifier on the columns container.
+ If you use mobile modifiers on single column elements, make sure to use the is-mobile modifier on the columns container.
+
+
+
+
Multiline columns
+
+
By default, if you want to start a new row, you just need to close a columns container and open a new one.
+
+
But you can also add the is-multilinemodifier on the columns container, and use column size modifiers (like is-half or is-3) to define size on multiple rows within the same container.
While modifiers are specific to each Bulma element, helpers are general utility classes that can be applied on almost any element. Check out the new helpers documentation!
<divclass="dropdown is-active">
+ <divclass="dropdown-trigger">
+ <aclass="button is-info">
+ <span>Content</span>
+ <spanclass="icon is-small">
+ <iclass="fa fa-angle-down"></i>
+ </span>
+ </a>
+ </div>
+ <divclass="dropdown-menu">
+ <divclass="dropdown-content">
+ <divclass="dropdown-item">
+ <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
+ </div>
+ <hrclass="dropdown-divider">
+ <divclass="dropdown-item">
+ <p>You simply need to use a <code><div></code> instead.</p>
+ </div>
+ <hrclass="dropdown-divider">
+ <aclass="dropdown-item">
+ This is a link
+ </a>
+ </div>
+ </div>
+</div>
+
+
+
+
+
+
+ Hoverable or Toggable
+
+
+
+
+ The dropdown component has 2 additional modifiers
+
+
+
+ is-hoverable: the dropdown will show up when hovering the dropdown-trigger
+
+
+ is-active: the dropdown will show up all the time
+
+
+
+
+
+
+ While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript.
+
+ Everything you need to create a website with Bulma
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Level
+
A multi-purpose horizontal level, which can contain almost any other element
+
+
+
+
+
The structure of a level is the following:
+
+
+ level: main container
+
+
level-left for the left side. This element is required, even if it is empty
+
+ level-right for the right side
+
+
level-item for each individual element
+
+
+
+
+
+
In a level-item, you can then insert almost anything you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma level, they will always be vertically centered.
+ By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container.
+
+ Everything you need to create a website with Bulma
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Media Object
+
The famous media object prevalent in social media interfaces, but useful in any context
+
+
+
+
+
The media object is a UI element perfect for repeatable and nestable content.
+
+
+
+
+
+
+
+
+
+
+
+
+ John Smith @johnsmith 31m
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ John Smith @johnsmith 31m
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+
+
+
+
+
+
+
+
+
+
+
<articleclass="media">
+ <figureclass="media-left">
+ <pclass="image is-64x64">
+ <imgsrc="http://bulma.io/versions/0.4.4/images/placeholders/128x128.png">
+ </p>
+ </figure>
+ <divclass="media-content">
+ <divclass="content">
+ <p>
+ <strong>John Smith</strong><small>@johnsmith</small><small>31m</small>
+ <br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+ </p>
+ </div>
+ <navclass="level is-mobile">
+ <divclass="level-left">
+ <aclass="level-item">
+ <spanclass="icon is-small"><iclass="fa fa-reply"></i></span>
+ </a>
+ <aclass="level-item">
+ <spanclass="icon is-small"><iclass="fa fa-retweet"></i></span>
+ </a>
+ <aclass="level-item">
+ <spanclass="icon is-small"><iclass="fa fa-heart"></i></span>
+ </a>
+ </div>
+ </nav>
+ </div>
+ <divclass="media-right">
+ <buttonclass="delete"></button>
+ </div>
+</article>
+
+
+
You can include any other Bulma element, like inputs, textareas, icons, buttons... or even a nav bar.
+ Barbara Middleton
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
+
+ Like · Reply · 3 hrs
+
+
+
+
+
+
+
+
+
+
+
+
+ Sean Brown
+
+ Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.
+
+ Like · Reply · 2 hrs
+
+
+
+
+ Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.
+
+
+
+ Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Kayli Eunice
+
+ Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat.
+
+ Like · Reply · 2 hrs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<articleclass="media">
+ <figureclass="media-left">
+ <pclass="image is-64x64">
+ <imgsrc="http://bulma.io/versions/0.4.4/images/placeholders/128x128.png">
+ </p>
+ </figure>
+ <divclass="media-content">
+ <divclass="content">
+ <p>
+ <strong>Barbara Middleton</strong>
+ <br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
+ <br>
+ <small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
+ </p>
+ </div>
+
+ <articleclass="media">
+ <figureclass="media-left">
+ <pclass="image is-48x48">
+ <imgsrc="http://bulma.io/versions/0.4.4/images/placeholders/96x96.png">
+ </p>
+ </figure>
+ <divclass="media-content">
+ <divclass="content">
+ <p>
+ <strong>Sean Brown</strong>
+ <br>
+ Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.
+ <br>
+ <small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
+ </p>
+ </div>
+
+ <articleclass="media">
+ Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.
+ </article>
+
+ <articleclass="media">
+ Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
+ </article>
+ </div>
+ </article>
+
+ <articleclass="media">
+ <figureclass="media-left">
+ <pclass="image is-48x48">
+ <imgsrc="http://bulma.io/versions/0.4.4/images/placeholders/96x96.png">
+ </p>
+ </figure>
+ <divclass="media-content">
+ <divclass="content">
+ <p>
+ <strong>Kayli Eunice </strong>
+ <br>
+ Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat.
+ <br>
+ <small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
+ </p>
+ </div>
+ </div>
+ </article>
+ </div>
+</article>
+<articleclass="media">
+ <figureclass="media-left">
+ <pclass="image is-64x64">
+ <imgsrc="http://bulma.io/versions/0.4.4/images/placeholders/128x128.png">
+ </p>
+ </figure>
+ <divclass="media-content">
+ <divclass="field">
+ <pclass="control">
+ <textareaclass="textarea"placeholder="Add a comment..."></textarea>
+ </p>
+ </div>
+ <divclass="field">
+ <pclass="control">
+ <buttonclass="button">Post comment</button>
+ </p>
+ </div>
+ </div>
+</article>
+ Everything you need to create a website with Bulma
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Messages
+
+ Colored message blocks, to emphasize part of your page
+
+
+
+
+
+
+
+
+
+
+
Hello World
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+
Dark
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+
Primary
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+
Info
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+
Success
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+
Warning
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+
+
<articleclass="message">
+ <divclass="message-header">
+ <p>Hello World</p>
+ <buttonclass="delete"></button>
+ </div>
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+<articleclass="message is-dark">
+ <divclass="message-header">
+ <p>Dark</p>
+ <buttonclass="delete"></button>
+ </div>
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+<articleclass="message is-primary">
+ <divclass="message-header">
+ <p>Primary</p>
+ <buttonclass="delete"></button>
+ </div>
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+<articleclass="message is-info">
+ <divclass="message-header">
+ <p>Info</p>
+ <buttonclass="delete"></button>
+ </div>
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+<articleclass="message is-success">
+ <divclass="message-header">
+ <p>Success</p>
+ <buttonclass="delete"></button>
+ </div>
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+<articleclass="message is-warning">
+ <divclass="message-header">
+ <p>Warning</p>
+ <buttonclass="delete"></button>
+ </div>
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+<articleclass="message is-danger">
+ <divclass="message-header">
+ <p><strong>Danger</strong>! <a>Learn more</a></p>
+ <buttonclass="delete"></button>
+ </div>
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+
+
+
+
+
+
Message body only
+
+
You can omit the message header:
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+
+
<articleclass="message">
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+<articleclass="message is-dark">
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+<articleclass="message is-primary">
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+<articleclass="message is-info">
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+<articleclass="message is-success">
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+<articleclass="message is-warning">
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+<articleclass="message is-danger">
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
<divclass="modal">
+ <divclass="modal-background"></div>
+ <divclass="modal-content">
+ <!-- Any other Bulma elements you want -->
+ </div>
+ <buttonclass="modal-close is-large"></button>
+</div>
+
+
+
To activate the modal, just add the is-active modifier on the .modal container
+
+
+
+
+ No JavaScript
+
+
+ Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself.
+
+
+
+
+
+
Image modal
+
+
+
Because a modal can contain anything you want, you can very simply use it to build an image gallery for example:
+ John Smith @johnsmith 31m
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Modal title
+
+
+
+
+
Hello World
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
+
Second level
+
Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
+
+
In fermentum leo eu lectus mollis, quis dictum mi aliquet.
+
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
+
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+
Ut non enim metus.
+
+
Third level
+
Quisque ante lacus, malesuada ac auctor vitae, congue non ante. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
+
+
Donec blandit a lorem id convallis.
+
Cras gravida arcu at diam gravida gravida.
+
Integer in volutpat libero.
+
Donec a diam tellus.
+
Aenean nec tortor orci.
+
Quisque aliquam cursus urna, non bibendum massa viverra eget.
+
Vivamus maximus ultricies pulvinar.
+
+
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.
+
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et justo sodales elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
+
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.
+
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.
+
Fourth level
+
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.
+
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
+
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.
+
Fifth level
+
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
+
Sixth level
+
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
+ Everything you need to create a website with Bulma
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
This component has been deprecated and will be deleted soon.
+
+
+
+
+
+
While both .nav and .navbar currently co-exist to ensure backwards compatibility, the .nav will probably be deleted in an upcoming update, so you should start using the new navbar instead.
+
+
+
+
+
Nav
+
+ A responsive horizontal nav bar that can contain links, tabs, buttons, icons, and a logo
+
+
+
+
+
+
+ The nav container can have 3 parts:
+
+
+
nav-left
+
nav-center
+
nav-right
+
+
+ Each nav item needs to be wrapped in a nav-item element.
+
+
+ For responsiveness, 2 additional classes are available:
+
+
+
nav-toggle for the hamburger menu on mobile
+
nav-menu for menu that is collapsable on mobile (you can combine it with nav-right)
+
toggle is-active on nav-toggle and nav-menu when nav-toggle was clicked
+
+
+
+
+
+
+
+
+
+
+
+
<navclass="nav">
+ <divclass="nav-left">
+ <aclass="nav-item">
+ <imgsrc="http://bulma.io/versions/0.4.4/images/bulma-logo.png"alt="Bulma logo">
+ </a>
+ </div>
+
+ <divclass="nav-center">
+ <aclass="nav-item">
+ <spanclass="icon">
+ <iclass="fa fa-github"></i>
+ </span>
+ </a>
+ <aclass="nav-item">
+ <spanclass="icon">
+ <iclass="fa fa-twitter"></i>
+ </span>
+ </a>
+ </div>
+
+ <!-- This "nav-toggle" hamburger menu is only visible on mobile -->
+ <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
+ <spanclass="nav-toggle">
+ <span></span>
+ <span></span>
+ <span></span>
+ </span>
+
+ <!-- This "nav-menu" is hidden on mobile -->
+ <!-- Add the modifier "is-active" to display it on mobile -->
+ <divclass="nav-right nav-menu">
+ <aclass="nav-item">
+ Home
+ </a>
+ <aclass="nav-item">
+ Documentation
+ </a>
+ <aclass="nav-item">
+ Blog
+ </a>
+
+ <divclass="nav-item">
+ <divclass="field is-grouped">
+ <pclass="control">
+ <aclass="button">
+ <spanclass="icon">
+ <iclass="fa fa-twitter"></i>
+ </span>
+ <span>Tweet</span>
+ </a>
+ </p>
+ <pclass="control">
+ <aclass="button is-primary">
+ <spanclass="icon">
+ <iclass="fa fa-download"></i>
+ </span>
+ <span>Download</span>
+ </a>
+ </p>
+ </div>
+ </div>
+ </div>
+</nav>
+
+
+
+
Modifiers
+
+
+
+
the nav container can have a shadow by adding the has-shadow modifier
+
the nav-item can become active by adding the is-active modifier
+
the nav-item can become a tab by adding the is-tab modifier
+
+
+ To optimise the space on desktop, but also allow the mobile view to be usable, you can duplicate nav items in both nav-left and nav-right, and show/hide them with responsive helpers.
+
+ The navbar brand is always visible: on both touch devices < 1008px
+ and desktop >= 1008px
+. As a result, it is recommended to only use a few navbar items to avoid overflowing horizontally on small devices.
+
+
+
+
+
+
+
+
+
+
<navclass="navbar">
+ <divclass="navbar-brand">
+ <aclass="navbar-item"href="http://bulma.io/versions/0.4.4">
+ <imgsrc="http://bulma.io/versions/0.4.4/images/bulma-logo.png"alt="Bulma v0.4.4: a modern CSS framework based on Flexbox"width="112"height="28">
+ </a>
+
+ <divclass="navbar-burger">
+ <span></span>
+ <span></span>
+ <span></span>
+ </div>
+ </div>
+</nav>
+
+
+
+ On desktop >= 1008px
+, the navbar brand will only take up the space it needs.
+
+
+
+
+
+
Navbar burger
+
+
+
+ The navbar-burger is a hamburger menu that only appears on mobile. It has to appear as the last child of navbar-brand.
+
+ The navbar-menu is hidden on touch devices< 1008px
+. You need to add the modifier class is-active to display it.
+
+
+
+
<divclass="navbar-menu">
+ <!-- hidden on mobile -->
+</div>
+
+<divclass="navbar-menu is-active">
+ <!-- shown on mobile -->
+</div>
+
+
+
+ On desktop >= 1008px
+, the navbar-menu will fill up the space available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
+
+
+
+ navbar-start
+
+
+ navbar-end
+
+
+
+
+
+
+
+
Javascript toggle
+
+
+
+ The Bulma package does not come with any JavaScript.
+
+ Here is however an implementation example, which toggles the class is-active on both the navbar-burger and the targeted navbar-menu.
+
document.addEventListener('DOMContentLoaded',function(){
+
+ // Get all "navbar-burger" elements
+ var$navbarBurgers=Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'),0);
+
+ // Check if there are any nav burgers
+ if($navbarBurgers.length>0){
+
+ // Add a click event on each of them
+ $navbarBurgers.forEach(function($el){
+ $el.addEventListener('click',()=>{
+
+ // Get the target from the "data-target" attribute
+ vartarget=$el.dataset.target;
+ var$target=document.getElementById(target);
+
+ // Toggle the class on both the "navbar-burger" and the "navbar-menu"
+ $el.classList.toggle('is-active');
+ $target.classList.toggle('is-active');
+
+ });
+ });
+ }
+
+});
+
+
+
+
+
+
+
Navbar start and navbar end
+
+
+
+ The navbar-start and navbar-end are the two direct and only children of the navbar-menu.
+
+
+ On desktop >= 1008px
+:
+
+
+
+ navbar-start will appear on the left
+
+
+ navbar-end will appear on the right
+
+
+
+ Each of them can contain any number of navbar-item.
+
+ It can either be an anchor tag <a> or a <div>, as a direct child of either:
+
+
+
+ navbar
+
+
+ navbar-brand
+
+
+ navbar-start
+
+
+ navbar-end
+
+
+ navbar-dropdown
+
+
+
+
+
+
+
Transparent navbar
+
+
+
+ To seamlessly integrate the navbar in any visual context, you can add the is-transparent modifer on the navbar component. This will remove any hover or active background from the navbar items.
+
+ Show/hide the dropdown with either CSS or JavaScript
+
+
+
+
+ The navbar-dropdown is visible on touch devices < 1008px
+ but hidden on desktop >= 1008px
+. How the dropdown is displayed on desktop depends on the parent's class.
+
+
+ The navbar-item with the has-dropdown modifier, has 2 additional modifiers
+
+
+
+ is-hoverable: the dropdown will show up when hovering the parent navbar-item
+
+
+ is-active: the dropdown will show up all the time
+
+
+
+
+
+
+ While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript.
+
+ By default, the list is located on the left, and the previous/next buttons on the right. But you can change the order of these elements by using the is-centered and is-right modifiers.
+
+ Everything you need to create a website with Bulma
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Box
+
+ A white box to contain other elements
+
+
+
+
+
+
+
+
+ The .box element is simply a container with a shadow, a border, a radius, and some padding.
+
+ For example, you can include a media object:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ John Smith @johnsmith 31m
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
+
+ You can create a non-interactive button by using the is-static modifier. This is useful to align a text label with an input, for example when using form addons.
+
+ Everything you need to create a website with Bulma
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Content
+
+ A single class to handle WYSIWYG generated content, where only HTML tags are available
+
+
+
+
+
+
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag:
+
+
<p> paragraphs
+
<ul><ol><dl> lists
+
<h1> to <h6> headings
+
<blockquote> quotes
+
<em> and <strong>
+
<table><tr><th><td> tables
+
+
This content class can be used in any context where you just want to (or can only) write some text. For example, it's used for the paragraph you're currently reading.
+
+
+
+
+
+
+
+
Hello World
+
Lorem ipsum[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subscript works as well!
+
Second level
+
Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
+
+
In fermentum leo eu lectus mollis, quis dictum mi aliquet.
+
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
+
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+
Ut non enim metus.
+
+
Third level
+
Quisque ante lacus, malesuada ac auctor vitae, congue non ante. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
+
+
Donec blandit a lorem id convallis.
+
Cras gravida arcu at diam gravida gravida.
+
Integer in volutpat libero.
+
Donec a diam tellus.
+
Aenean nec tortor orci.
+
Quisque aliquam cursus urna, non bibendum massa viverra eget.
+
Vivamus maximus ultricies pulvinar.
+
+
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.
+
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et justo sodales elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
+
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.
+
+
Web
+
The part of the Internet that contains websites and web pages
+
HTML
+
A markup language for creating web pages
+
CSS
+
A technology to make HTML look better
+
+
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.
+
Fourth level
+
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.
+
<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hello World</title>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
+ </body>
+</html>
+
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
+
+
+
+
One
+
Two
+
+
+
+
+
Three
+
Four
+
+
+
Five
+
Six
+
+
+
Seven
+
Eight
+
+
+
Nine
+
Ten
+
+
+
Eleven
+
Twelve
+
+
+
+
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.
+
Fifth level
+
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
+
+
+
+
+
<divclass="content">
+ <h1>Hello World</h1>
+ <p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
+ <h2>Second level</h2>
+ <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
+ <ul>
+ <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+ <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+ <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+ <li>Ut non enim metus.</li>
+ </ul>
+ <h3>Third level</h3>
+ <p>Quisque ante lacus, malesuada ac auctor vitae, congue <ahref="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
+ <ol>
+ <li>Donec blandit a lorem id convallis.</li>
+ <li>Cras gravida arcu at diam gravida gravida.</li>
+ <li>Integer in volutpat libero.</li>
+ <li>Donec a diam tellus.</li>
+ <li>Aenean nec tortor orci.</li>
+ <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
+ <li>Vivamus maximus ultricies pulvinar.</li>
+ </ol>
+ <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
+ <p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
+ <p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
+ <dl>
+ <dt>Web</dt>
+ <dd>The part of the Internet that contains websites and web pages</dd>
+ <dt>HTML</dt>
+ <dd>A markup language for creating web pages</dd>
+ <dt>CSS</dt>
+ <dd>A technology to make HTML look better</dd>
+ </dl>
+ <p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
+ <h4>Fourth level</h4>
+ <p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
+ <pre><!DOCTYPE html>
+<html>
+ <head>
+ <title>Hello World</title>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
+ </body>
+</html></pre>
+ <p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
+ <table>
+ <thead>
+ <tr>
+ <th>One</th>
+ <th>Two</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Three</td>
+ <td>Four</td>
+ </tr>
+ <tr>
+ <td>Five</td>
+ <td>Six</td>
+ </tr>
+ <tr>
+ <td>Seven</td>
+ <td>Eight</td>
+ </tr>
+ <tr>
+ <td>Nine</td>
+ <td>Ten</td>
+ </tr>
+ <tr>
+ <td>Eleven</td>
+ <td>Twelve</td>
+ </tr>
+ </tbody>
+ </table>
+ <p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
+ <h5>Fifth level</h5>
+ <p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
+ <figure>
+ <imgsrc="http://bulma.io/versions/0.4.4/images/placeholders/256x256.png">
+ <imgsrc="http://bulma.io/versions/0.4.4/images/placeholders/256x256.png">
+ <figcaption>
+ Figure 1: Some beautiful placeholders
+ </figcaption>
+ </figure>
+ <h6>Sixth level</h6>
+ <p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
+</div>
+
+
+
+
Sizes
+
+
You can use the is-small, is-medium and is-large modifiers to change the font size.
+
+
+
+
Hello World
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
+
Second level
+
Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
+
+
In fermentum leo eu lectus mollis, quis dictum mi aliquet.
+
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
+
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+
Ut non enim metus.
+
+
+
+
+
+
Hello World
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
+
Second level
+
Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
+
+
In fermentum leo eu lectus mollis, quis dictum mi aliquet.
+
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
+
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+
Ut non enim metus.
+
+
+
+
+
+
Hello World
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
+
Second level
+
Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
+
+
In fermentum leo eu lectus mollis, quis dictum mi aliquet.
+
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
+
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
+
+
+
+
+ Info
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+
+
+
+
+
<divclass="block">
+ <spanclass="tag is-success">
+ Hello World
+ <buttonclass="delete is-small"></button>
+ </span>
+</div>
+
+<divclass="notification is-danger">
+ <buttonclass="delete"></button>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
+</div>
+
+<articleclass="message is-info">
+ <divclass="message-header">
+ Info
+ <buttonclass="delete"></button>
+ </div>
+ <divclass="message-body">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+ </div>
+</article>
+ All generic form controls, designed for consistency
+
+
+
+
+
+
The following form controls classes are supported:
+
+
.label
+
.input
+
.textarea
+
.select
+
.checkbox
+
.radio
+
.button
+
.help
+
+
Each of them should be wrapped in a .control container.
+ When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.
+ If you want to group controls together, use the is-grouped modifier on the control container.
+
+ Use the is-grouped-centered or the is-grouped-right modifers to alter the alignment.
+
+
+ Add the is-expanded modifier on the control element you want to fill up the remaining space.
+
Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a container:
+ Everything you need to create a website with Bulma
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Images
+
+ A container for responsive images
+
+
+
+
+
+
Because images can take a few seconds to load (or not at all), use the .image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.
There are 7 dimensions to choose from, useful for avatars:
+
+
+
+
+
+
image is-16x16
+
+
16x16px
+
+
+
image is-24x24
+
+
24x24px
+
+
+
image is-32x32
+
+
32x32px
+
+
+
image is-48x48
+
+
48x48px
+
+
+
image is-64x64
+
+
64x64px
+
+
+
image is-96x96
+
+
96x96px
+
+
+
image is-128x128
+
+
128x128px
+
+
+
+
+
Retina images
+
+
+
Because the image is fixed in size, you can use an image that is twice as big. So for example, in a 128x128 container, you can use a 256x256 image, but resized to 128x128 pixels.
+ Everything you need to create a website with Bulma
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Notifications
+
+ Bold notification blocks, to alert your users of something
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit
+
+
+
+ Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit
+
+
+
+ Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit
+
+
+
+ Success lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit
+
+
+
+ Warning lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit
+
+
+
+ Danger lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit
+
+
+
+
<divclass="notification">
+ <buttonclass="delete"></button>
+ Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
+ consectetur adipiscing elit
+</div>
+
+<divclass="notification is-primary">
+ <buttonclass="delete"></button>
+ Primar lorem ipsum dolor sit amet, consectetur
+ adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
+ consectetur adipiscing elit
+</div>
+
+<divclass="notification is-info">
+ <buttonclass="delete"></button>
+ Info lorem ipsum dolor sit amet, consectetur
+ adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
+ consectetur adipiscing elit
+</div>
+
+<divclass="notification is-success">
+ <buttonclass="delete"></button>
+ Success lorem ipsum dolor sit amet, consectetur
+ adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
+ consectetur adipiscing elit
+</div>
+
+<divclass="notification is-warning">
+ <buttonclass="delete"></button>
+ Warning lorem ipsum dolor sit amet, consectetur
+ adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
+ consectetur adipiscing elit
+</div>
+
+<divclass="notification is-danger">
+ <buttonclass="delete"></button>
+ Danger lorem ipsum dolor sit amet, consectetur
+ adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
+ consectetur adipiscing elit
+</div>
+ Everything you need to create a website with Bulma
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Checkbox
+
+ The 2-state checkbox in its native format
+
+
+
+
+
+
+ The checkbox class is a simple wrapper around the <input type="checkbox"> HTML element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
+
+
+
+
+
+
+
+
+
+
+
<labelclass="checkbox">
+ <inputtype="checkbox">
+ Remember me
+</label>
+
+
+
+
+
+ You can add links to your checkbox, or even disable it.
+
+
+
+
+
+
+
+
+
+
+
<labelclass="checkbox">
+ <inputtype="checkbox">
+ I agree to the <ahref="#">terms and conditions</a>
+</label>
+
+
+
+
+
+
+
+
+
+
+
<labelclass="checkbox"disabled>
+ <inputtype="checkbox"disabled>
+ Save my preferences
+</label>
+ All generic form controls, designed for consistency
+
+
+
+
+
+
The following form controls classes are supported:
+
+
.label
+
.input
+
.textarea
+
.select
+
.checkbox
+
.radio
+
.button
+
.help
+
+
Each of them should be wrapped in a .control container.
+ When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.
The control is a versatile container meant to enhance single form controls. Because it has the same height as a control elements, it can only contain the following elements:
+ If you want to group controls together, use the is-grouped modifier on the field container.
+
+ Use the is-grouped-centered or the is-grouped-right modifers to alter the alignment.
+
+
+ Add the is-expanded modifier on the control element you want to fill up the remaining space with.
+
+ Everything you need to create a website with Bulma
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Radio
+
+ The mutually exclusive radio buttons in their native format
+
+
+
+
+
+
+ The radio class is a simple wrapper around the <input type="radio"> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
+
+
+ Make sure the linked radio buttons have the same value for their name HTML attribute.
+
+ 
+ 
+ 
+ 
