Bulma

  • Last Updated :07 Apr, 2022

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.

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 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/[email protected]/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='https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css'>
 </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:

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above

My Personal Notesarrow_drop_up

Writing code in comment? Please use ide.geeksforgeeks.org, generate link and share the link here.