Author
This post is an index page for all post of Bulma CSS tutorials with examples.
It is very simple to install in any web application. Just use CSS file with stylesheet in HTML to get access to all components and CSS styles
To install Npm package
Columns Examples
Output is
This example explains various button styles
is-primary
.is-info
.is-success
.is-link
.is-warning
.is-danger
Bulma Layout
Bulma Form Example
Bulma CSS Introduction and features
Bulma is CSS opensource framework based on flexbox. which support following features- Responsive that works on any screen size, Like a Bootstrap framework, It is designed as per Mobile First
- Lightweight in size
- A lot of Inbuilt components and predefined SASS styles
- Better design than bootstrap
- It is based on modules that support sass files
- Customizable and extendable
Installation and Setup
Any website or HTML can be integrated with Bulma CSS in many ways.
- using bulma.min.css file directly
- CDN library
- NPM package
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
To install Npm package
npm package bulma
Responsive Columns
Html file can be added with below viewport meta tag to work on any screen size
<meta name="viewport" content="width=device-width, initial-scale=1">
Columns and Levels
It is based flexbox like a grid in bootstrap. It contains columns which have multiple column styles All the columns can be applied in the parent container CSS style. Here is an example Level is one more attribute which can be displayed elements horizontally - Level-left,level-rightColumns Examples
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Learn Bulma CSS Tutorials with examples</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
</head>
<body>
<div class="container">
<div class="columns">
<div class="column">
1st column
</div>
<div class="column">
2nd column
</div>
<div class="column">
3rd column
</div>
<div class="column">
4th column
</div>
</div>
</div>
</body>
</html>
Output is
Modifiers
Bulma has is- and has- modifiers to apply various UI styles to UI elements. For example, is-primary add a different color to the buttonThis example explains various button styles
is-primary
.is-info
.is-success
.is-link
.is-warning
.is-danger
<section class="section">
<div class="container">
<a class="button">
Normal Button
</a>
<a class="button is-primary">
Primary button
</a>
<a class="button is-link">
Link button
</a>
<a class="button is-info">
Info button
</a>
<a class="button is-warning">
Warning button
</a>
<a class="button is-error">
Error button
</a>
<a class="button is-danger">
Danger button
</a>
</div>
</section>
EmoticonEmoticon