Learn Bulma CSS for free

Build three beautiful websites in less than an hour

    <!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 not one, not two, but three beautiful, responsive websites bootstrapped with Bulma in less than an hour.

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

What people are saying about Scrimba: