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 Bulma.io & How to use it?
- Integrate Bulma in GeneratePress Theme.
- Integrate Bulma in WP Astra Theme.
- So on…
Though adding Bulma.io 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 Bulma.io?
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 Bulma.io 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.

2. Add New Hook Element
Let’s add New Hook in Element.
Go to Appearance > Elements > Add New Element

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.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
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
- How to Add JavaScript in GeneratePress Theme?
- Best GeneratePress Templates for Affiliate Marketing
- [Fix] Image Elements do not have explicit width and height in GeneratePress
- GeneratePress Custom Code Snippets
- How to Create Sticky Floating Footer Bar in GeneratePress Theme?
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.

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.

Copy and Paste the following code into the snippet box.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
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
- How to Add Floating WhatsApp Button in Astra Theme?
- How to Add Floating Social Sharing Buttons in Astra Theme?
- How to Make Sidebar Sticky in Astra Theme (Last Widget)?
- How to Add Last Updated Date in Astra Theme?
- How to Insert Social Media Icons in Astra Theme without Plugin?
- How to Add Social Sharing Buttons in Astra Theme without Plugin?
- How to Create a Simple Carousel Slider in Bulma CSS?
Bottom Line
This is the demonstration to integrate Bulma (CSS Framework) in WordPress. I hope that you can now easily add an online Bulma.io 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.
Main bhi aapke jaise blog Banana chahta hu
Hi Madhav,
Thank You for your comment.
I provide customization services. Please contact.
Thanks
Hi, Suraj
Can we design like copyblogger.com using generatepress??
Hi Suvho,
You can almost design using GenerateBlocks and GeneratePress.
Thanks
You’ll want to use something like Display Posts too.
hello suraj bhai! can you please explain (gp vs newspaper) which wordpress theme is more user-friendly and good choice for technology based website?
Hi Suvho,
I have been using GeneratePress and Generateblocks past 2-3 years.
Lately, the Newspaper theme has worked on various things like core web vitals, etc.
I have only good things about GP and GB.
Also, I have seen lots of tech sites using Newspaper themes. So before using it analyze your requirements, read reviews, and decide.
Thanks
Thanks sir can you share Animating Link Underlines like your blog post.. Thanks
Thank you for sharing useful knowledge. Have a nice day.