Learn Bulma CSS for free

This course teaches you Bulma CSS through 13 interactive tutorials. 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.

ZAYDEK ๐Ÿ‘จโ€๐Ÿ’ป๐Ÿ‘จโ€๐ŸŽจ, course creator

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

What people say about this course

How about some company while you learn?

We've created a community chat so that you can ask questions, help others, and connect with like-minded people.

Join community chat