Bulma is a free, open-source CSS framework that utilizes classes to provide pre-defined styling for building responsive web interfaces. It is designed to be flexible and easy to use, providing a wide range of components like forms, buttons, modals, and more, that you can use to create your web pages. With Bulma, you can quickly create beautiful layouts by applying class names to HTML elements. The framework's modular structure allows you to pick and choose the elements you want to use and customize them as needed. This makes it an excellent choice for beginners or developers who want to save time on styling but still have control over the design. Bulma is also built with responsiveness in mind, making it easy to create websites that look great on all devices without having to write custom media queries. Overall, Bulma is a powerful tool that simplifies the process of creating modern, sleek websites without sacrificing flexibility or customization options.
V1.2.0Find leads based on open job vacanciesGet started
1,932 Companies using Bulma
Want to download the entire list?
Enter your email and download the entire list of 1,932+ companies
How to use Bulma
Bulma is a modern and easy-to-use CSS framework that provides a wide range of reusable CSS classes to help you style your web pages quickly. Here are some steps to get started with Bulma:
- Add Bulma to your project: You can add Bulma to your project in different ways, such as downloading the CSS files or including them through a CDN. To use a CDN, simply add the following link to the head section of your HTML file:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
- Start using Bulma classes: Once you have added Bulma to your project, you can start using its classes to style your HTML elements. For example, if you want to create a button with a blue background color and white text, you can add the following classes to your button element:
<button class="button is-primary">Click me</button>
In this example, the
- Customize Bulma variables: Bulma provides a set of variables that you can customize to change the look and feel of your website. For example, you can change the primary color of your website by customizing the variable. To do this, simply add the following code to your CSS file:
This will change the primary color to red.
- Use Bulma components: Bulma also provides a set of pre-built components that you can use to create common UI elements, such as forms, modals, and navigation bars. To use these components, simply include their corresponding CSS classes in your HTML markup. For example, to create a navbar, you can add the following code to your HTML file:
<nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"> </a> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item"> Home </a> <a class="navbar-item"> Documentation </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> More </a> <div class="navbar-dropdown"> <a class="navbar-item"> About </a> <a class="navbar-item"> Jobs </a> <a class="navbar-item"> Contact </a> <hr class="navbar-divider"> <a class="navbar-item"> Report an issue </a> </div> </div> </div> <div class="navbar-end"> <div class="navbar-item"> <div class="buttons"> <a class="button is-primary"> <strong>Sign up</strong> </a> <a class="button is-light"> Log in </a> </div> </div> </div> </div> </nav>
This will create a simple navbar with a logo, a burger menu, and some links.
Overall, Bulma is a great framework to use if you want to quickly and easily style your web pages without writing too much custom CSS. Its rich set of classes and components can help you create beautiful and responsive websites in no time.