Learn Bulma CSS for free

This tutorial teaches you Bulma CSS through 13 interactive screencasts. In less than an hour you'll have built three websites with the popular CSS framework.

    <!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    	</head>
    	<body>
    		<section class="section">
    			<div class="container">
    <!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
            <style>
                
    .center {
        display: flex;
    <!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .center {
    	display: flex;
    <!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .center {
    	display: flex;
    <!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .center {
    	display: flex;
    <!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <link rel="stylesheet" href="styles/debug.css">
    		<style>
    
    .is-paddingless-horizontal { padding-left: 0; padding-right: 0; }
    
    <!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .center {
    	display: flex;
    <!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .center {
    	display: flex;
    <!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .center {
    	display: flex;
    <!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<style>
    
    .hero {
    	background: black url(images/hero-1.jpg) center / cover;
    <!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<link rel="stylesheet" href="styles/helpers.css">
    		<style>
    
    .hero {
    <!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<link rel="stylesheet" href="styles/helpers.css">
    		<style>
    
    .hero {
    <!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    		<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
            <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    		<link rel="stylesheet" href="styles/helpers.css">
    		<link rel="stylesheet" href="styles/grid.css">
    		<style>
    

Building websites is hardโ€ฆ But Bulma can lessen the pain! ๐Ÿ™Œ

Bulma is the brainchild of CSS Guru Jeremy Thomas @jgthms. It's a modern CSS framework based on Flexbox. The framework makes scaffolding and designing websites a breeze with best-in-class documentation and well-designed, intuitive components and modifiers. โœจ

Bulma is great not just for building but learning best HTML and CSS practices, too! It's like having @jgthms ๐Ÿ‘จโ€๐ŸŽจ there the whole time. ๐Ÿ˜

In this course, you'll learn to create three beautiful, responsive websites with Bulma in less than an hour. It'll cover the following concepts:

  • Bulma classes
  • Modifiers and helpers
  • Color helpers
  • Padding
  • Width
  • Center content
  • Titles
  • Columns
  • Container
  • Hero, Section, Navbar
  • Notifications
  • Bulma and CSS Grid

... and much more!

And remember, this isn't a regular video course, it's a Scrimba course! This means you can interact with the code inside the tutorials whenever you want, which makes learning much more fun!

Have a question, comment, or feedback? Feel free to reach out to the course creator Zaydek at Twitter: @username_zaydek.

what other people say

the ultimate code learning experience

meet your teacher

The course creator

ZAYDEK ๐Ÿ‘จโ€๐Ÿ’ป๐Ÿ‘จโ€๐ŸŽจ

Zaydek is a self-taught designer and programmer. He's created three popular Scrimba courses, all of which inspires the students to be creative with the tools they learn. Zaydek is especially interested in distributed self-education.

Thank ZAYDEK for the course

secure your free spot