Bulma CSSフレームワークの使い方をご紹介します。このページ自体もBulmaを使っているので、そのままサンプルとなっています。
公式サイト | https://bulma.io/ |
開発者 | Jeremy Thomas |
ライセンス | MIT |
GitHub stars | 42.7k |
モジュール | サイズ |
---|---|
bulma.min.css | 199KB |
Bulma CSSフレームワークのテンプレートは次のとおり。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
</head>
<body>
<!-- content -->
</body>
</html>
Bulma CSSフレームワークはCDN (Contents Delivery Network) を通じて使うことができる。CDNを使ったBulmaのテンプレートは次のとおり。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
</head>
<body>
<!-- content -->
</body>
</html>
<div class="has-background-primary">Primary</div>
<div class="has-background-info">Info</div>
<div class="has-background-link">Link</div>
<div class="has-background-success">Success</div>
<div class="has-background-warning">Warning</div>
<div class="has-background-danger">Danger</div>
<div class="has-background-black">Black</div>
<div class="has-background-black-bis">Black-bis</div>
<div class="has-background-black-ter">Black-ter</div>
<div class="has-background-dark">Dark</div>
<div class="has-background-grey">Grey</div>
<div class="has-background-grey-dark">Grey-dark</div>
<div class="has-background-grey">Grey</div>
<div class="has-background-grey-light">Grey-light</div>
<div class="has-background-grey-lighter">Grey-lighter</div>
<div class="has-background-light">Light</div>
<div class="has-background-white-ter">White-ter</div>
<div class="has-background-white-bis">White-bis</div>
<div class="has-background-white">White</div>
<button class="button">Button</button>
<a class="button">Link</a>
<input type="submit" class="button">
<input type="reset" class="button">
<div class="card">
<div class="card-content">カード</div>
</div>
<div class="card">
<header class="card-header">
<p class="card-header-title">Header title</p>
</header>
<div class="card-content">Content</div>
</div>
Header title
<div class="card">
<div class="card-content">Content</div>
<footer class="card-footer">
<p class="card-footer-item">1st footer item</p>
<p class="card-footer-item">2nd footer item</p>
</footer>
</div>
<div class="columns">
<div class="column">first column</div>
<div class="column">second column</div>
</div>
<div class="columns">
<div class="column is-full has-background-primary">full column</div>
</div>
<div class="columns">
<div class="column is-half has-background-primary">half column</div>
</div>
<div class="columns">
<div class="column is-one-third has-background-primary">1/3 column</div>
</div>
<div class="columns">
<div class="column is-two-thirds has-background-primary">2/3 column</div>
</div>
<div class="columns">
<div class="column is-one-quarter has-background-primary">1/4 column</div>
</div>
<div class="columns">
<div class="column is-three-quarters has-background-primary">3/4 column</div>
</div>
<div class="container has-background-primary">
<p>Container</p>
</div/>
Container
<div class="container is-fluid has-background-primary">
<p>Fluid container</p>
</div/>
Fluid container
<div class="container is-widescreen has-background-primary">
<p>Widescreen container</p>
</div/>
Widescreen container
<div class="container is-fullhd has-background-primary">
<p>Full HD container</p>
</div/>
Full HD Container
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを最大にするには、is-size-1 クラスを指定する。
<p class="is-size-1">一番大きいフォント</p>
一番大きいフォント
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを2番目の大きさにするには、is-size-2 クラスを指定する。
<p class="is-size-2">2番目に大きいフォント</p>
2番目に大きいフォント
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを3番目の大きさにするには、is-size-3 クラスを指定する。
<p class="is-size-3">3番目に大きいフォント</p>
3番目に大きいフォント
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを4番目の大きさにするには、is-size-4 クラスを指定する。
<p class="is-size-4">4番目に大きいフォント</p>
4番目に大きいフォント
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを5番目の大きさにするには、is-size-5 クラスを指定する。
<p class="is-size-5">5番目に大きいフォント</p>
5番目に大きいフォント
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを6番目の大きさにするには、is-size-6 クラスを指定する。
<p class="is-size-6">6番目に大きいフォント</p>
6番目に大きいフォント
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを1番小さくするには、is-size-7 クラスを指定する。
<p class="is-size-7">一番小さいフォント</p>
一番小さいフォント
Bulma CSSフレームワークでは、マージン(要素の外側の余白)のサイズを0から6までの7段階で指定できる。マージンを無しにするには、m-0 クラスを指定する。
<div class="m-0 has-background-primary">マージン無し</div>
Bulma CSSフレームワークでは、マージン(要素の外側の余白)のサイズを0から6までの7段階で指定できる。マージンを2番目の大きさにするには、m-1 クラスを指定する。
<div class="m-1 has-background-primary">.m-1</div>
Bulma CSSフレームワークでは、マージン(要素の外側の余白)のサイズを0から6までの7段階で指定できる。マージンを3番目の大きさにするには、m-2 クラスを指定する。
<div class="m-2 has-background-primary">.m-2</div>
Bulma CSSフレームワークでは、マージン(要素の外側の余白)のサイズを0から6までの7段階で指定できる。マージンを4番目の大きさにするには、m-3 クラスを指定する。
<div class="m-3 has-background-primary">.m-3</div>
Bulma CSSフレームワークでは、マージン(要素の外側の余白)のサイズを0から6までの7段階で指定できる。マージンを5番目の大きさにするには、m-4 クラスを指定する。
<div class="m-4 has-background-primary">.m-4</div>
Bulma CSSフレームワークでは、マージン(要素の外側の余白)のサイズを0から6までの7段階で指定できる。マージンを6番目の大きさにするには、m-5 クラスを指定する。
<div class="m-5 has-background-primary">.m-5</div>
Bulma CSSフレームワークでは、マージン(要素の外側の余白)のサイズを0から6までの7段階で指定できる。マージンを一番大きくするには、m-6 クラスを指定する。
<div class="m-6 has-background-primary">一番大きいマージン</div>
<div class="mb-0 has-background-primary">.mb-0</div>
<div class="mb-1 has-background-primary">.mb-1</div>
<div class="mb-2 has-background-primary">.mb-2</div>
<div class="mb-3 has-background-primary">.mb-3</div>
<div class="mb-4 has-background-primary">.mb-4</div>
<div class="mb-5 has-background-primary">.mb-5</div>
<div class="mb-6 has-background-primary">.mb-6</div>
<div class="ml-0 mt-1 has-background-primary">.ml-0</div>
<div class="ml-1 mt-1 has-background-primary">.ml-1</div>
<div class="ml-2 mt-1 has-background-primary">.ml-2</div>
<div class="ml-3 mt-1 has-background-primary">.ml-3</div>
<div class="ml-4 mt-1 has-background-primary">.ml-4</div>
<div class="ml-5 mt-1 has-background-primary">.ml-5</div>
<div class="ml-6 mt-1 has-background-primary">.ml-6</div>
<div class="mx-0 mt-1 has-background-primary">.mx-0</div>
<div class="mx-1 mt-1 has-background-primary">.mx-1</div>
<div class="mx-2 mt-1 has-background-primary">.mx-2</div>
<div class="mx-3 mt-1 has-background-primary">.mx-3</div>
<div class="mx-4 mt-1 has-background-primary">.mx-4</div>
<div class="mx-5 mt-1 has-background-primary">.mx-5</div>
<div class="mx-6 mt-1 has-background-primary">.mx-6</div>
<div class="my-0 has-background-primary">.my-0</div>
<div class="my-1 has-background-primary">.my-1</div>
<div class="my-2 has-background-primary">.my-2</div>
<div class="my-3 has-background-primary">.my-3</div>
<div class="my-4 has-background-primary">.my-4</div>
<div class="my-5 has-background-primary">.my-5</div>
<div class="my-6 has-background-primary">.my-6</div>
<p class="has-text-weight-light">Light</p>
Light
<p class="has-text-weight-normal">Normal</p>
Normal
<p class="has-text-weight-medium">Medium</p>
Medium
<p class="has-text-weight-semibold">Semibold</p>
Semibold
<p class="has-text-weight-bold">Bold</p>
Bold
<footer class="footer">
<div class="content has-text-centered">
<p>SE学院</p>
</div>
</footer>
<form action="#">
<div class="field">
<label class="label">First name</label>
<div class="control">
<input class="input" type="text" placeholder="First name">
</div>
</div>
</form>
Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの6段階で指定できる。タイトルやサブタイトルのサイズを最大にするには、is-1 クラスを指定する。
<h1 class="title is-1">Title</h1>
<h1 class="subtitle is-1">Subtitle</h1>
Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの6段階で指定できる。タイトルやサブタイトルのサイズを2番目に大きくするには、is-2 クラスを指定する。
<h1 class="title is-2">Title</h1>
<h1 class="subtitle is-2">Subtitle</h1>
Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの6段階で指定できる。タイトルやサブタイトルのサイズを3番目に大きくするには、is-3 クラスを指定する。
<h1 class="title is-3">Title</h1>
<h1 class="subtitle is-3">Subtitle</h1>
Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの6段階で指定できる。タイトルやサブタイトルのサイズを4番目に大きくするには、is-4 クラスを指定する。
<h1 class="title is-4">Title</h1>
<h1 class="subtitle is-4">Subtitle</h1>
Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの6段階で指定できる。タイトルやサブタイトルのサイズを5番目に大きくするには、is-4 クラスを指定する。
<h1 class="title is-5">Title</h1>
<h1 class="subtitle is-5">Subtitle</h1>
Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの6段階で指定できる。タイトルやサブタイトルのサイズを最小にするには、is-6 クラスを指定する。
<h1 class="title is-6">Title</h1>
<h1 class="subtitle is-6">Subtitle</h1>
<a onclick="openModal('modal')" class="button is-primary">開く</a>
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<!-- contnt -->
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<script>
function openModal(id) {
document.getElementById(id).classList.add("is-active")
}
function closeModal(id) {
document.getElementById(id).classList.remove("is-active")
}
<script>
開く
<nav class="navbar" role="navigation" aria-label="main navigation">
<div id="example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/css/bootstrap/">Bootstrap</a>
<a class="navbar-item" href="/css/materialize/">Materialize</a>
<a class="navbar-item" href="/css/milligram/">Milligram</a>
</div>
</div>
</nav>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div id="example" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item" href="/css/primer/">Primer CSS</a>
<a class="navbar-item" href="/css/pure/">Pure.css</a>
<a class="navbar-item" href="/css/semantic/">Semantic UI</a>
</div>
</div>
</nav>
<nav class="navbar is-primary">
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/css/skeleton/">Skeleton</a>
<a class="navbar-item" href="/css/spectre/">Spectre.css</a>
<a class="navbar-item" href="/css/tachyons/">Tachyons</a>
</div>
</div>
</nav>
<nav class="navbar">
<div class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Framework</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/css/tailwind/">Tailwind CSS</a>
<a class="navbar-item" href="/css/uikit/">UIkit</a>
<a class="navbar-item" href="/css/foundation/">Zurb Foundation</a>
</div>
</div>
</div>
</div>
</nav>
<div class="pb-0 mt-1 has-background-primary">.pb-0</div>
<div class="pb-1 mt-1 has-background-primary">.pb-1</div>
<div class="pb-2 mt-1 has-background-primary">.pb-2</div>
<div class="pb-3 mt-1 has-background-primary">.pb-3</div>
<div class="pb-4 mt-1 has-background-primary">.pb-4</div>
<div class="pb-5 mt-1 has-background-primary">.pb-5</div>
<div class="pb-6 mt-1 has-background-primary">.pb-6</div>
<div class="pl-0 mt-1 has-background-primary">.pl-0</div>
<div class="pl-1 mt-1 has-background-primary">.pl-1</div>
<div class="pl-2 mt-1 has-background-primary">.pl-2</div>
<div class="pl-3 mt-1 has-background-primary">.pl-3</div>
<div class="pl-4 mt-1 has-background-primary">.pl-4</div>
<div class="pl-5 mt-1 has-background-primary">.pl-5</div>
<div class="pl-6 mt-1 has-background-primary">.pl-6</div>
<div class="py-0 mt-1 has-background-primary">.py-0</div>
<div class="py-1 mt-1 has-background-primary">.py-1</div>
<div class="py-2 mt-1 has-background-primary">.py-2</div>
<div class="py-3 mt-1 has-background-primary">.py-3</div>
<div class="py-4 mt-1 has-background-primary">.py-4</div>
<div class="py-5 mt-1 has-background-primary">.py-5</div>
<div class="py-6 mt-1 has-background-primary">.py-6</div>
Bulma CSSでテキストを中央寄せにするには、has-text-centered クラスを指定する。
<p class="has-text-centered">中央寄せ</p>
中央寄せ
<p class="has-text-justified">両幅寄せ</p>
両幅寄せ
Bulma CSSでテキストを左寄せにするには、has-text-centered クラスを指定する。
<p class="has-text-left">左寄せ</p>
左寄せ
Bulma CSSでテキストを右寄せにするには、has-text-centered クラスを指定する。
<p class="has-text-right">右寄せ</p>
右寄せ
<p class="has-text-primary">Primary</p>
Primary
<p class="has-text-info">Info</p>
Info
<p class="has-text-link">Link</p>
Link
<p class="has-text-success">Success</p>
Success
<p class="has-text-warning">Warning</p>
Warning
<p class="has-text-danger">Danger</p>
Danger
<p class="has-text-black">Black</p>
Black
<p class="has-text-dark">Dark</p>
Dark
<p class="has-text-grey-darker">Grey-darker</p>
Grey-darker
<p class="has-text-grey-dark">Grey-dark</p>
Grey-dark
<p class="has-text-grey">Grey</p>
Grey
<p class="has-text-grey-light has-background-black">Grey-light</p>
Grey-light
<p class="has-text-grey-lighter has-background-black">Grey-lighter</p>
Grey-lighter
<p class="has-text-light has-background-black">Light</p>
Light
<p class="has-text-white has-background-black">White</p>
White
<section class="section has-background-primary">
<p>Section</p>
</section>
Section
<table class="table">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr>
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0005 | 三菱UFJ銀行 |
0009 | 三井住友銀行 |
9900 | ゆうちょ銀行 |
<table class="table is-bordered">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr>
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0005 | 三菱UFJ銀行 |
0009 | 三井住友銀行 |
9900 | ゆうちょ銀行 |
<table class="table is-striped">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr>
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0005 | 三菱UFJ銀行 |
0009 | 三井住友銀行 |
9900 | ゆうちょ銀行 |
テーブルに is-hoverable クラスを指定すると、マウスカーソルを乗せた行の色が変わるようになる。
<table class="table is-hoverable">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr>
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0005 | 三菱UFJ銀行 |
0009 | 三井住友銀行 |
9900 | ゆうちょ銀行 |
<table class="table is-narrow">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr>
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0005 | 三菱UFJ銀行 |
0009 | 三井住友銀行 |
9900 | ゆうちょ銀行 |
<table class="table is-fullwidth">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr>
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0005 | 三菱UFJ銀行 |
0009 | 三井住友銀行 |
9900 | ゆうちょ銀行 |
テーブルの行に is-selected クラスを指定すると、その行の色が変わる。
<table class="table">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr class="is-selected">
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0005 | 三菱UFJ銀行 |
0009 | 三井住友銀行 |
9900 | ゆうちょ銀行 |
Breadcrumb navigation
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>
Center aligned breadcrumb navigation
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>
Right aligned breadcrumb navigation
<nav class="breadcrumb is-right" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>
Small breadcrumb navigation
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>
Medium breadcrumb navigation
<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>
Large breadcrumb navigation
<nav class="breadcrumb is-large" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>
Breadcrumb navigation with arrow separator
<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>
Breadcrumb navigation with bullet separator
<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>
Breadcrumb navigation with dot separator
<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>
Breadcrumb navigation with succeeds separator
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>
Small button
<button class="button is-small">Small button</button>
Medium button in Bulma
<button class="button is-medium">Button</button>
<a class="button is-medium">Link</a>
<input type="submit is-medium" class="button">
Link
Large button in Bulma
<button class="button is-large">Button</button>
<a class="button is-large">Link</a>
<input type="submit" class="button is-large">
Link
Full width button in Bulma
<button class="button is-fullwidth">Button</button>
<a class="button is-fullwidth">Link</a>
<input type="submit" class="button is-fullwidth">
White button
<button class="button is-white">White button</button>
Dark button
<button class="button is-dark">Dark button</button>
Black button
<button class="button is-black">Black button</button>
Text button
<button class="button is-text">Text button</button>
Primary button
<button class="button is-primary">Primary button</button>
Link button
<button class="button is-link">Link button</button>
Info button
<button class="button is-info">Info button</button>
Success button
<button class="button is-success">Success button</button>
Warning button
<button class="button is-warning">Warning button</button>
Danger button
<button class="button is-danger">Danger button</button>
Light button
<button class="button is-light">Button</button>
<button class="button is-primary is-light">Primary</button>
<button class="button is-link is-light">Link</button>
<button class="button is-info is-light">Info</button>
<button class="button is-success is-light">Success</button>
<button class="button is-warning is-light">Warning</button>
<button class="button is-danger is-light">Danger</button>
Outlined button
<button class="button is-outlined">Button</button>
<button class="button is-primary is-outlined">Primary</button>
<button class="button is-link is-outlined">Link</button>
<button class="button is-info is-outlined">Info</button>
<button class="button is-success is-outlined">Success</button>
<button class="button is-warning is-outlined">Warning</button>
<button class="button is-danger is-outlined">Danger</button>
Inverted button
<button class="button is-inverted">Button</button>
<button class="button is-primary is-inverted">Primary</button>
<button class="button is-link is-inverted">Link</button>
<button class="button is-info is-inverted">Info</button>
<button class="button is-success is-inverted">Success</button>
<button class="button is-warning is-inverted">Warning</button>
<button class="button is-danger is-inverted">Danger</button>
Rounded button
<button class="button is-rounded">Button</button>
Loading button
<button class="button is-loading">Button</button>
Static button
<button class="button is-static">Button</button>
Disabled button
<button class="button" disabled>Button</button>
Button with icon
<button class="button is-success">
<span class="icon">
<i class="fas fa-check"></i>
</span>
<span>OK</span>
</button>
Font style in Bulma
<span class="is-italic">Italic</span>
Italic
Small input
<div class="field">
<div class="control">
<input class="input is-small" type="text" placeholder="First name">
</div>
</div>
Medium input
<div class="field">
<div class="control">
<input class="input is-medium" type="text" placeholder="First name">
</div>
</div>
Large input
<div class="field">
<div class="control">
<input class="input is-large" type="text" placeholder="First name">
</div>
</div>
Rounded input
<div class="field">
<div class="control">
<input class="input is-rounded" type="text" placeholder="First name">
</div>
</div>
Input with icon
<div class="field">
<p class="control has-icons-left">
<input class="input" type="password" placeholder="Password">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</p>
</div>
Title
<h1 class="title">h1</h1>
<h2 class="title">h2</h2>
<h3 class="title">h3</h3>
<h4 class="title">h4</h4>
<h5 class="title">h5</h5>
<h6 class="title">h6</h6>
Subtitle
<h1 class="subtitle">h1</h1>
<h2 class="subtitle">h2</h2>
<h3 class="subtitle">h3</h3>
<h4 class="subtitle">h4</h4>
<h5 class="subtitle">h5</h5>
<h6 class="subtitle">h6</h6>
Icon
<span class="icon">
<i class="fas fa-home""></i>
</span>
Top margin
<div class="mt-0 has-background-primary">.mt-0</div>
<div class="mt-1 has-background-primary">.mt-1</div>
<div class="mt-2 has-background-primary">.mt-2</div>
<div class="mt-3 has-background-primary">.mt-3</div>
<div class="mt-4 has-background-primary">.mt-4</div>
<div class="mt-5 has-background-primary">.mt-5</div>
<div class="mt-6 has-background-primary">.mt-6</div>
Right margin
<div class="mr-0 mt-1 has-background-primary">.mr-0</div>
<div class="mr-1 mt-1 has-background-primary">.mr-1</div>
<div class="mr-2 mt-1 has-background-primary">.mr-2</div>
<div class="mr-3 mt-1 has-background-primary">.mr-3</div>
<div class="mr-4 mt-1 has-background-primary">.mr-4</div>
<div class="mr-5 mt-1 has-background-primary">.mr-5</div>
<div class="mr-6 mt-1 has-background-primary">.mr-6</div>
Modal card
<div class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal card</p>
</header>
<section class="modal-card-body">
<!-- content -->
</section>
<footer class="modal-card-foot">
<button class="button">OK</button>
</footer>
</div>
</div>
Padding
<div class="p-0 mt-1 has-background-primary">.p-0</div>
<div class="p-1 mt-1 has-background-primary">.p-1</div>
<div class="p-2 mt-1 has-background-primary">.p-2</div>
<div class="p-3 mt-1 has-background-primary">.p-3</div>
<div class="p-4 mt-1 has-background-primary">.p-4</div>
<div class="p-5 mt-1 has-background-primary">.p-5</div>
<div class="p-6 mt-1 has-background-primary">.p-6</div>
Top padding
<div class="pt-0 mt-1 has-background-primary">.pt-0</div>
<div class="pt-1 mt-1 has-background-primary">.pt-1</div>
<div class="pt-2 mt-1 has-background-primary">.pt-2</div>
<div class="pt-3 mt-1 has-background-primary">.pt-3</div>
<div class="pt-4 mt-1 has-background-primary">.pt-4</div>
<div class="pt-5 mt-1 has-background-primary">.pt-5</div>
<div class="pt-6 mt-1 has-background-primary">.pt-6</div>
Tag in Bulma
<span class="tag">Tag</span>
<span class="tag is-black">Black</span>
<span class="tag is-dark">Dark</span>
<span class="tag is-light">Light</span>
<span class="tag is-white">White</span>
<span class="tag is-primary">Primary</span>
<span class="tag is-link">Link</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>
Tag
Black
Dark
Light
White
Primary
Link
Info
Success
Warning
Danger
Medium tag in Bulma
<span class="tag is-medium">Tag</span>
<span class="tag is-medium is-black">Black</span>
<span class="tag is-medium is-dark">Dark</span>
<span class="tag is-medium is-light">Light</span>
<span class="tag is-medium is-white">White</span>
<span class="tag is-medium is-primary">Primary</span>
<span class="tag is-medium is-link">Link</span>
<span class="tag is-medium is-info">Info</span>
<span class="tag is-medium is-success">Success</span>
<span class="tag is-medium is-warning">Warning</span>
<span class="tag is-medium is-danger">Danger</span>
Tag
Black
Dark
Light
White
Primary
Link
Info
Success
Warning
Danger
Large tag in Bulma
<span class="tag is-large">Tag</span>
<span class="tag is-large is-black">Black</span>
<span class="tag is-large is-dark">Dark</span>
<span class="tag is-large is-light">Light</span>
<span class="tag is-large is-white">White</span>
<span class="tag is-large is-primary">Primary</span>
<span class="tag is-large is-link">Link</span>
<span class="tag is-large is-info">Info</span>
<span class="tag is-large is-success">Success</span>
<span class="tag is-large is-warning">Warning</span>
<span class="tag is-large is-danger">Danger</span>
Tag
Black
Dark
Light
White
Primary
Link
Info
Success
Warning
Danger
Rounded tag in Bulma
<span class="tag is-rounded">Tag</span>
<span class="tag is-large is-rounded is-black">Black</span>
<span class="tag is-large is-rounded is-dark">Dark</span>
<span class="tag is-large is-rounded is-light">Light</span>
<span class="tag is-large is-rounded is-white">White</span>
<span class="tag is-large is-rounded is-primary">Primary</span>
<span class="tag is-large is-rounded is-link">Link</span>
<span class="tag is-large is-rounded is-info">Info</span>
<span class="tag is-large is-rounded is-success">Success</span>
<span class="tag is-large is-rounded is-warning">Warning</span>
<span class="tag is-large is-rounded is-danger">Danger</span>
Tag
Black
Dark
Light
White
Primary
Link
Info
Success
Warning
Danger
Medium tags in Bulma
<div class="tags are-medium">
<span class="tag">Tag</span>
<span class="tag is-primary">Primary</span>
</div>
Large tags in Bulma
<div class="tags are-large">
<span class="tag">Tag</span>
<span class="tag is-primary">Primary</span>
</div>
Tags addons in Bulma
<div class="tags has-addons">
<span class="tag">Tag</span>
<span class="tag is-primary">Primary</span>
</div>