Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive and minimizes the use of media queries for responsive behavior.
Bulma
Why Bulma?
It is easy to learn.
It is used to create responsive design for all devices (desktops, tablets, and mobiles).
It is easy to read and write the code.
It can be combined with any JavaScript framework (AngularJS, ReactJS).
It is customizable and modularizable.
It is a lightweight, modern CSS framework, which uses Flexbox.
Bulma
Bulma Installation Steps: To install the Bulma using the following steps, first you need to install node.js. You can see the articles to install Node.js in Windows or Linux System.
Using NPM:
npm install bulma
Using Yarn:
yarn add bulma
Using Bower:
bower install bulma
After installation of Bulma, import the CSS file into your project using the following code snippet:
@import 'bulma/css/bulma.css'
CDN Link: Without installing the Bulma, you can directly run the Bulma code using Bulma CDN link. Add this link inside the head section of the code.
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
Now let’s understand the working of it using an example.
Example: The below example illustrates the text transformation class.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Text transformation</b>
<br>
<div class="container">
<p class="is-capitalized is-size-4">
geeksforGeeks
</p>
<p class="is-lowercase is-size-4">
GeeksforGeeks
</p>
<p class="is-uppercase is-size-4">
GeeksforGeeks
</p>
<p class="is-italic is-size-4">
GeeksforGeeks
</p>
<p class="is-underlined is-size-4">
GeeksforGeeks
</p>
</div>
</body>
</html>
Output:
Bulma Complete References:
Learn to code easily with our course
Coding for Everyone . This course is accessible and designed for everyone, even if you're new to coding. Start today and join millions on a journey to improve your skills!Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now! Commit to GfG's Three-90 Challenge! Purchase a course, complete 90% in 90 days, and save 90% cost click here to explore.
Last Updated :
13 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Add Your Comment
Please Login
