What is Bulma?
Bulma is a free, open-source CSS framework based on Flexbox and used by more than 200,000 developers.
The main advantage of using Bulma is that its box model is fully based on Flexbox. no more CSS floats and percentages.
Responsiveness – 100% Responsive.Design for a mobile first
Every element in Bulma is mobile-first and optimizes for vertical reading, so by default on mobile:
- columns are stacked vertically
- the level component will show its children stacked vertically
- the nav menu will be hidden
You can, however, enforce the horizontal layout for both columns or level by appending the is-mobile modifier.
Modularity – Just import what you need
Bulma consists of 39 .sass files that you can import individually.
For example, let’s say you only want the Bulma columns.
The file is located in the bulma/sass/grid folder.
Simply import the utilities dependencies, and then the files you need directly:
Morden- Columns powered by Flexbox.A simple way to build responsive columns.
Building a columns layout with Bulma is very simple:
- Add a columns container
- Add as many column elements as you want
Each column will have 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>
Free – Open Source on GitHub
Why to use Bulma?