VOOZH about

URL: https://bulma.io/documentation/start/overview/

⇱ Overview of Bulma | Bulma: Free, open source, and modern CSS framework based on Flexbox


πŸ‘ Image

Learn CSS with πŸŽ“ online interactive courses,πŸ“Ί educational videos, and πŸ§‘πŸ»β€πŸ’»project-building tutorials.

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

πŸ‘ Route Planner and Route Optimizer

Overview of Bulma


You only need 1 CSS file to use Bulma

Bulma is a CSS library. This means it provides CSS classes to help you style your HTML code.

To use Bulma, you can either:

  • use one of the pre-compiled .css files
  • or install the .scss files so you can customize Bulma to your needs

Code requirements #

For Bulma to work correctly, you need to make your webpage responsive.

1

Use the HTML5 doctype

<!DOCTYPE html>

2

Add the responsive viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Starter template #

If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Hello Bulma!</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
 </head>
 <body>
 <section class="section">
 <div class="container">
 <h1 class="title">
 Hello World
 </h1>
 <p class="subtitle">
 My first website with <strong>Bulma</strong>!
 </p>
 </div>
 </section>
 </body>
</html>

How to support Bulma

One-time donation

Browser testing via

πŸ‘ Image
πŸ‘ Image

Visit our Sponsors

Monthly donation

Become a sponsor
πŸ‘ Image
#native_company# #native_desc#
#native_cta#
πŸ‘ Image
πŸ‘ Image
Get started for Free
πŸ‘ Image
πŸ‘ Image
Get started for Free