How to Integrate Bulma (CSS Framework) in WordPress?

In this guide, we are going to integrate Bulma (CSS Framework) in WordPress without using any plugin.

Alternative to Bootstrap, Bulma is one of the CSS frameworks and it’s getting more popular day by day.

In this tutorial, you are going to learn

  • What is & How to use it?
  • Integrate Bulma in GeneratePress Theme.
  • Integrate Bulma in WP Astra Theme.
  • So on…

Though adding CDN is easy but it might get conflict with your current WordPress Theme. So, use it wisely.

When I first get to know about Bulma CSS Framework, I open my VS Code and tried it. I quickly fell in love with Bulma.

What is

So, what is Bulma, and how to get started?

Bulma is a CSS framework alternative to Bootstrap and other CSS frameworks.

It is a free, open-source CSS framework where you can design a responsive website quickly.

With 45000+ stars on Github, Bulma is a powerful framework and you are in the good hands of developers.

To get started with Bulma Framework you need to have basic knowledge of HTML. Head towards the Bulma documentation and get started with it.

Steps to Integrate Bulma (CSS Framework) in WordPress

Here, we are going to integrate Bulma in two of the popular WordPress Themes i.e. in GeneratePress and Astra Theme.

1. Add Bulma in GeneratePress Theme

Follow these steps exactly to add and use Bulma in GP Theme.

1. Activate Elements Module

We need to add Hook in GeneratePress in order to insert CDN on our website. so, let’s activate the Element Module.

Go to Appearance > GeneratePress > Elements > Activate

For this, you need to have a premium module of GeneratePress Theme.

Activate Element Module in GeneratePress Theme

2. Add New Hook Element

Let’s add New Hook in Element.

Go to Appearance > Elements > Add New Element

Adding a New Hook in GeneratePress

Choose the Element Type as Hook. Give the Hook New Title as Bulma CDN URL.

Here we are going to add the Bulma CDN HTML link.

To get started, you only need one URL.

For the latest CDN link, please visit the official website. I am using version 0.9.3 at the time of writing this tutorial.

3. Manage Hook Settings

After inserting the code.

Go to Hook Settings and choose Hook to show wp_head. Leave other settings blank.

Again, Go to Display Rules and Choose the Location to display on an Entire Site.

4. Create a Post/Page to use Bulma CSS

Create a new post/page where you want to use the Bulma code.

Recommended Reading

2. Add Bulma in WP Astra Theme

Use exactly these steps to add and use Bulma in Astra Theme.

1. Activate Custom Layouts Module

Now go to Appearance > Astra Options > Custom Layouts > Activate the option.

Activating Custom Layouts Module in Astra Theme

2. Add Custom Layouts Bulma Hook

  • First, Go to Appearance > Astra Options > Custom Layouts.
  • Click on Add New button to add custom layouts.
  • Now, Enable Code Editor Option that is located at the top of the box.
  • Here, Add the Title for the Bulma Integration.
  • Under Layout Option, choose the Hooks option.
  • Now, you will be able to see more Hooks options.
Bulma CDN WP Astra

Copy and Paste the following code into the snippet box.

3. Manage Custom Layout Settings

  • Under Action, Select wp_head.
  • Leave Priority as it is.
  • Under Spacing leave it as it is.
  • Select Entire Website under Display On Option.
  • Under Responsive Visibility leave as it is.
  • For other settings leave blank.
  • Finally Hit Publish Button.

4. Create a Post/Page in Astra to use Bulma CSS

Create a new post/page where you want to use the Bulma code in the current Astra Theme.

Check Out

Bottom Line

This is the demonstration to integrate Bulma (CSS Framework) in WordPress. I hope that you can now easily add an online CDN. In this tutorial, I have mentioned steps for Astra and GeneratePress Theme only.

Likewise, you can try the theme that you are using with a similar process. If you have any questions regarding this guide then feel free to comment down below.

Related articles

How to Install Sendy on Cloudways? (Setup Guide)

In this guide, we are going to learn how...

How to Remove a Website from Ezoic?

Fed up with Ezoic? Discover how to remove a...

How to Start a Health Blog: Beginner’s Guide

Learning how to start a health blog is easier...

How to Start a Beauty Blog: Beginner’s Guide

If you’re curious about what you should do to...

How to Start a Tech Blog: Beginner’s Guide

Technology is one of the most fascinating things we...

Case Studies

Finance and Budgeting Blog

Easy Extra Dollar is your trusted source for valuable insights into finance, budgeting, and investing. The platform is dedicated to helping individuals and families...

Marketing Gamut – Marketing Blog

Marketing Gamut is the ultimate platform for marketing enthusiasts, offering valuable insights, engaging content, and thought-provoking discussions on all things marketing. The client needed...

Business and Marketing Insights Blog

Business Analysis is a platform dedicated to decoding the complexities of business and marketing through comprehensive data analysis and strategic planning. The client required...