Skip to content

Instantly share code, notes, and snippets.

@Masamasamasashito

Masamasamasashito/bulma.html

Last active February 18, 2019 09:59
Show Gist options
  • Save Masamasamasashito/0e57a2e9bb1c16722cd8e9b56d6a22f6 to your computer and use it in GitHub Desktop.
Save Masamasamasashito/0e57a2e9bb1c16722cd8e9b56d6a22f6 to your computer and use it in GitHub Desktop.
Download ZIP
Bulma Basic Components
Raw
bulma.html
<!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.4/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</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>
<!--
hero: https://bulma.io/documentation/layout/hero/
section: https://bulma.io/documentation/layout/section/
image: https://bulma.io/documentation/elements/image/
columns: https://bulma.io/documentation/columns/basics/
media: https://bulma.io/documentation/layout/media-object/
icon: https://bulma.io/documentation/elements/icon/
breadcrumb: https://bulma.io/documentation/components/breadcrumb/
level: https://bulma.io/documentation/layout/level/
-->
<!-- hero : https://bulma.io/documentation/layout/hero/ -->
<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title">
Hero title
</h1>
<h2 class="subtitle">
Hero subtitle
</h2>
</div>
</div>
</section>
<!-- section : https://bulma.io/documentation/layout/section/ -->
<section class="section">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
</h2>
</div>
</section>
<!-- image : https://bulma.io/documentation/elements/image/ -->
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
<!-- columns : https://bulma.io/documentation/columns/basics/ -->
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
<!-- media : https://bulma.io/documentation/layout/media-object/ -->
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="https://bulma.io/images/placeholders/128x128.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
</div>
<div class="media-right">
<button class="delete"></button>
</div>
</article>
<!-- icon : https://bulma.io/documentation/elements/icon/ -->
<span class="icon">
<i class="fas fa-home"></i>
</span>
<!-- breadcrumb : https://bulma.io/documentation/components/breadcrumb/ -->
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li><a href="#">Bulma</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Components</a></li>
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
</ul>
</nav>
<!-- level : https://bulma.io/documentation/layout/level/ -->
<!-- Main container -->
<nav class="level">
<!-- Left side -->
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>123</strong> posts
</p>
</div>
<div class="level-item">
<div class="field has-addons">
<p class="control">
<input class="input" type="text" placeholder="Find a post">
</p>
<p class="control">
<button class="button">
Search
</button>
</p>
</div>
</div>
</div>
<!-- Right side -->
<div class="level-right">
<p class="level-item"><strong>All</strong></p>
<p class="level-item"><a>Published</a></p>
<p class="level-item"><a>Drafts</a></p>
<p class="level-item"><a>Deleted</a></p>
<p class="level-item"><a class="button is-success">New</a></p>
</div>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment